reactjs - 在 React.js 中删除项目时的意外行为
问题描述
很长一段时间后，我开始重温 React。我几乎有一个存储公司面试流程的“列表”。这是由 2 个反应组件构建的。是聚合每个作业的列表。
当您转到“删除行”时，反应注册了要删除的正确“行”，（并且通过使用调试简单的情况发生这种情况）但它不会成功更新内部组件。
我花了时间研究这个，我添加了一个简单的组件，叫做“欢迎”。这对我有帮助，因为我可以使用它来验证我正在删除正确的元素，只是内部的“jobrow”组件没有正确更新。
https://codepen.io/anon/pen/XwaWPj
class Jobs extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
jobs: props.data.items
//jobs: [{ id: "" }]
};
}
handleAddJob = () => {
this.setState({
jobs: this.state.jobs.concat([{ "company":"", "position": "", "next_steps": []}])
});
console.log(this.state);
};
handleRemoveJob = key => () => {
//var index = this.state.jobs.indexOf(items)
console.log(this.state.jobs.filter((item, j) => item.key !== key) )
this.setState({
//shareholders: this.state.shareholders.filter((s, sidx) => idx !== sidx)
//next_steps: this.state.next_steps.splice(idx, 1)
jobs: this.state.jobs.filter((item, j) => item.key !== key)
});
};
//<JobRow
// company={items.company}
// position={items.position}
// next_steps={items.next_steps}/>
render() {
return (
<div>
<h4>Jobs Applied</h4>
{this.state.jobs.map((items =>
<div>
<Welcome name={items.company} />
<JobRow
company={items.company}
position={items.position}
next_steps={items.next_steps}/>
<button
type="button"
onClick={this.handleRemoveJob(items.key)} //.bind(this)
className="small">
remove row
</button>
</div>
))
}
<button
type="button"
onClick={this.handleAddJob}
className="small">
Add New Job
</button>
</div>
)
};
}
// ===========
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
// ===========
//https://stackoverflow.com/questions/50147840/how-to-format-and-display-json-data-using-array-map-in-reactjs
class JobRow extends React.Component {
constructor(props) {
super(props);
this.state = {
company: props.company,
position: props.position,
next_steps: props.next_steps,
};
}
handleNameChange = evt => {
this.setState({ name: evt.target.value });
};
handleAddField = () => {
this.setState({
//shareholders: this.state.shareholders.concat([{ name: "" }])
next_steps: this.state.next_steps.concat("")
});
};
handleRemoveField = idx => () => {
this.setState({
//shareholders: this.state.shareholders.filter((s, sidx) => idx !== sidx)
//next_steps: this.state.next_steps.splice(idx, 1)
next_steps: this.state.next_steps.filter((s, sidx) => idx !== sidx)
});
};
changeTextCompany(event){
this.setState(
//"{this.state.textValue : event.target.value}"
{company: event.target.value}
);
}
render() {
return (
<div>
<div class="flex-container">
<div class="inner_flex">
<span>
<input type="text" class="form-control" placeholder="Company" value={this.state.company} id="comapny_input" onChange={this.changeTextCompany}/>
</span>
<span>
<input type="text" class="form-control" placeholder="Position" value={this.state.position} oninput="selectJobType()" id="position_input"/>
</span>
<span>
<select id="position_type">
<option value="fulltime">Fulltime</option>
<option value="intern">Co-Op/Internship</option>
</select>
</span>
</div>
{this.state.next_steps.map((step, idx) => (
<span>
<button
type="button"
onClick={this.handleRemoveField(idx)}
className="small"
>
-
</button>
<input placeholder="Next State" value={step} />
</span>
))}
<button
type="button"
onClick={this.handleAddField}
className="small">
Next Stage
</button>
</div>
</div>
);
}
}
我希望删除的正确行反映在文本框中。
我非常感谢您的反馈。
解决方案
使用getDerivedStateFromProps 更新JobsRow中的状态。
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: #B6E3DC;
margin: 0px;
padding: 5px;
}
.flex-container > div > span {
display: inline-block;
padding: 2.5px;
}
input {display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; width: 100% !important; border-radius: 0 !important; line-height: 1 !important;}
td {margin: 0 !important; padding: 0 !important;}
input {display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; width: 100% !important; border-radius: 0 !important; line-height: 1 !important;}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
var json = {"items":[
{"key":132, "company":"Google", "position": "SE Intern", "next_steps": ["Coding", "phone"]
},
{"key":133, "company":"FaceBook", "position": "DS Intern", "next_steps": ["Onsite", "Offer"]
},
{"key":134, "company":"twitter", "position": "architectre", "next_steps": ["coffeechat", "denail"]
},
{"key":135, "company":"oracle", "position": "sleeping", "next_steps": []
}
]}
class Jobs extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
jobs: this.props.data.items
//jobs: [{ id: "" }]
};
}
handleAddJob = () => {
this.setState({
jobs: this.state.jobs.concat([
{ company: '', position: '', next_steps: [] }
])
});
console.log(this.state);
};
handleRemoveJob = key => () => {
//var index = this.state.jobs.indexOf(items)
//console.log(this.state.jobs.filter((item, j) => item.key !== key));
this.setState({
//shareholders: this.state.shareholders.filter((s, sidx) => idx !== sidx)
//next_steps: this.state.next_steps.splice(idx, 1)
jobs: this.state.jobs.filter((item, j) => item.key !== key)
});
};
//<JobRow
// company={items.company}
// position={items.position}
// next_steps={items.next_steps}/>
render() {
return (
<div>
<h4>Jobs Applied</h4>
{this.state.jobs.map(items => (
<div>
<Welcome name={items.company} />
<JobRow
company={items.company}
position={items.position}
next_steps={items.next_steps}
/>
<button
type="button"
onClick={this.handleRemoveJob(items.key)} //.bind(this)
className="small"
>
remove row
</button>
</div>
))}
<button type="button" onClick={this.handleAddJob} className="small">
Add New Job
</button>
</div>
);
}
}
// ===========
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
// ===========
//https://stackoverflow.com/questions/50147840/how-to-format-and-display-json-data-using-array-map-in-reactjs
class JobRow extends React.Component {
constructor(props) {
super(props);
this.state = {
company: props.company,
position: props.position,
next_steps: props.next_steps
};
}
static getDerivedStateFromProps(props, state) {
// compare props with state data
// if they are not equal return props
// or return null
// more info here https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
return props;
}
handleNameChange = evt => {
this.setState({ name: evt.target.value });
};
handleAddField = () => {
this.setState({
//shareholders: this.state.shareholders.concat([{ name: "" }])
next_steps: this.state.next_steps.concat('')
});
};
handleRemoveField = idx => () => {
this.setState({
//shareholders: this.state.shareholders.filter((s, sidx) => idx !== sidx)
//next_steps: this.state.next_steps.splice(idx, 1)
next_steps: this.state.next_steps.filter((s, sidx) => idx !== sidx)
});
};
changeTextCompany(event) {
this.setState(
//"{this.state.textValue : event.target.value}"
{ company: event.target.value }
);
}
render() {
return (
<div>
<div class="flex-container">
<div class="inner_flex">
<span>
<input
type="text"
class="form-control"
placeholder="Company"
value={this.state.company}
id="comapny_input"
onChange={this.changeTextCompany}
/>
</span>
<span>
<input
type="text"
class="form-control"
placeholder="Position"
value={this.state.position}
oninput="selectJobType()"
id="position_input"
/>
</span>
<span>
<select id="position_type">
<option value="fulltime">Fulltime</option>
<option value="intern">Co-Op/Internship</option>
</select>
</span>
</div>
{this.state.next_steps.map((step, idx) => (
<span>
<button
type="button"
onClick={this.handleRemoveField(idx)}
className="small"
>
-
</button>
<input placeholder="Next State" value={step} />
</span>
))}
<button type="button" onClick={this.handleAddField} className="small">
Next Stage
</button>
</div>
</div>
);
}
}
ReactDOM.render(<Jobs data={json}/>, document.getElementById('root'));
</script>另一种选择是直接在 JobsRow 中访问道具，而不是将它们保存在状态中。
<span>
<input
...
value={this.props.company}
...
/>
</span>
<span>
<input
...
value={this.props.position}
...
/>
</span>
推荐阅读
- r - How to plot standard error bars from a dataframe?
- asp.net - Can't redirect to another action method after form submission
- c++ - ld.exe: DWARF error: could not find variable specification at offset 101cee
- jquery - 不能影响轮播宽度
- java - 您可以从 Android 上的照片应用内容提供商获取原始图像文件吗？
- python - 如何使用 tweepy 从 json 列表中回复带有文本和图像的推文
- php - 计算所有
并用php替换数字4 - python - rpy2：加载安装在conda环境中的R版本，而不是系统中的那个
- python - Login_redirect_url 不起作用。查看总是重定向到索引
- python - 如何根据每个子列表中非零元素的数量对列表列表进行排序？