javascript - 在ReactJS中正确修改状态数组

我想在数组的末尾添加一个元素,这是正确的方法吗?

this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});

我担心用state修改数组可能会导致问题-它安全吗?
另一种方法是复制数组,这看起来很浪费。


最佳答案:

React docs表示:
将this.state视为不可变的。
您的push将直接改变状态,这可能导致容易出错的代码,即使您随后再次“重置”状态。例如,它可能会导致一些生命周期方法,如componentDidUpdate不会触发。
在以后的react版本中,建议在修改状态以防止竞争条件时使用updater函数:

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}))

与使用非标准状态修改可能遇到的错误相比,内存“浪费”不是一个问题。
早期反应版本的可选语法
您可以使用concat获得一个干净的语法,因为它返回一个新数组:
this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

在ES6中,您可以使用Spread Operator
this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})