反應 - 通過文本框設置集合的 state 時遇到問題

Question

我有我的初始化 state 像這樣：

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

然后是一個 function 來處理文本框 onChange 事件：

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

這是我目前的 onChange 處理程序：

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

在 handleChange function 中，我想定位 notearr 集合，但不確定如何定位該特定集合。 它當前寫入 state 的根目錄，而不是在所需的集合中。

Answer 1

您必須使用從以前的 state 克隆的新 object 覆蓋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不會顯示更新的 state 因為setState是異步的。 如果您在那里看到更新的 state，那么您做錯了什么（您正在改變狀態）。