React-通过文本框设置集合的状态时遇到问题

Question

我的初始化状态如下：

this.state = {
notearr: {
noteid: this.props.id,
notevalue: null,
},
dataLoaded: false,
};

然后是一个处理文本框onChange事件的函数：

<TextField
name="notevalue"
value={this.state.notevalue}
onChange={handleChange}
/>

这是我在变更处理程序上的礼物：

const handleChange = (event) => {
event.preventDefault();
this.setState({[event.target.name]: event.target.value});
console.log(this.state.notearr.notevalue);
};

在handleChange函数中，我希望以notearr集合为目标，但不确定如何以该特定集合为目标。它当前写入状态的根，而不是在所需的集合中。

Answer 1

您必须用一个新对象覆盖notearr，该对象是从以前的状态克隆的：

const { name, value } = event.target;
this.setState(prev => ({ notearr: { ...prev.notearr, [name]: value }}));

你可能会忍不住这么做：

this.setState({ notearr: { ...this.state.notearr, [event.target.name]: event.target.value }}); 

然而，在该版本中，如果同时发生两次更新，它们将相互覆盖，因为setState是异步的。此外，当事件被回收时，您需要在回调之前复制值。

还要注意，在调用setState之后记录this.state不会显示更新的状态，因为setState是异步的。如果你在那里看到了更新的状态，那么你做错了什么(你正在改变状态(。