尝试将存储在 dataEdited 中的 name、day 和 dob 元素的值记录为对象。Two的元素显示未定义，只有一个显示正确的值。 这是代码
/* 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()
关于Javascript 对象元素未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60988116/