意外的反應組件狀態值更改

Question

我試圖更新state值，但首先我已經在另一個裝好了var和新所做的更改后var它要setState和更新原有的state值。 但是意外地對temp var更改已經更改了component state值！

var postData = this.state.postData;
postData.likes = postData.likes + 1;
console.log(postData.likes, this.state.postData.likes);

console.log值：（1、1）（2、2）...

Answer 1

由於postData是一個對象，因此請勿將其直接保存在另一個變量中，因為這將創建對該狀態的引用，而不是副本。 如果是參考，更改一個將更改它們都指向同一對象的其他余弦。

首先復制它”

    var postData = Object.assign({}, this.state.postData)

然后更改它。 然后，完成后，使用setState({postData})

Answer 2

您永遠都不應更改狀態，而應始終使用setState，並且要復制對象用戶的傳播符號“ ...”

this.setState(((prevState) => ({
  postData:{
    ...prevState.postData,
    likes: prevState.postData.likes + 1,

  }
});

Answer 3

您也可以使用ES2018傳播符號，例如var postData = {...this.state.postData}; 復制對象並對其進行操作，然后再分配回狀態。