执行
尝试将name、day和dob元素的值作为对象存储在dataEdited中。其中两个元素显示未定义，只有一个显示正确的值。这是代码
/* two-way state binding */
dataChange(event){
const target = event.target;
const value = target.value; //gets value of the textbox
const name = target.name;
this.setState({ dataEdited: {[name]: value} });
}
handleUpdate(event){
event.preventDefault();
const {name,day,dob} = this.state.dataEdited;
console.log(name, day, dob);
/* this.setState({ toggle: false }) */
}
状态
this.state = {
name: '',
day: '',
dob: '',
items : [],
currentItem: {},
dataEdited: {},
toggle: false,
loading: false
}
渲染
<form onSubmit={this.handleUpdate}>
<input
className=""
name="name"
onChange={this.dataChange}
defaultValue={this.state.currentItem.name}
placeholder= "Celebrant's Name"
ref={name => this.name = name}
required />
<input
className=""
type="number"
name="day"
min="1"
max="31"
ref={day => this.day = day}
onChange={this.dataChange}
defaultValue={this.state.currentItem.day}
placeholder= "day" />
<input
className=""
name="dob"
type="month"
onChange={this.dataChange}
defaultValue={this.state.currentItem.dob} />
<button type="submit">update</button>
<button onClick={this.handleEditCancel}>cancel</button>
</form>
这是控制台上的结果
undefined undefined "2020-08"
我不明白这怎么可能，我能得到解释吗。此外，我该如何解决此问题？
this.setState({ dataEdited: {[name]: value} });时，会覆盖对象中分配给dataEdited的其他值。
您应该将其更改为this.setState({ dataEdited: { ...this.state.dataEdited, [name]: value} });，以在this.state.dataEdited中保留以前的值
更新(谢谢@JMadelaine(：您应该使用this.setState(prev => ({ dataEdited: { ...prev.dataEdited, [name]: value}}));来确保没有并发状态更改影响setState()
更多信息：https://stackoverflow.com/a/50837784/10201813
问题
调用this.setState({ dataEdited: {[name]: value} });时，您正在一遍又一遍地覆盖同一个dataEdited变量因此，只有最后更改的数据才会出现在数据编辑中
解决方案
单独保存数据或适当更改setState功能
每次调用时都会覆盖状态变量dataEdited
this.setState({ dataEdited: {[name]: value} });
所以你想更改扩展对象dataEdited和state之后添加或更改名称、dob或day
this.setState({
...this.state,
dataEdited: { ...this.state.dataEdited, [name]: value }
});
此处为CodeSandbox