ReactJS中状态数组的正确修改

Question

ReactJS中状态数组的正确修改我想在state数组，这是正确的方法吗？this.state.arrayvar.push(newelement);this.setState({arrayvar:this.state.arrayvar});我担心用push可能会惹麻烦-安全吗？另一种方法是复制数组，以及setState看起来很浪费。

Answer 1

这个反应文档说：

把它当作是不可变的状态。

你的push将直接改变状态，这可能会导致容易出错的代码，即使之后您再次“重置”状态。Fex，它可能导致一些生命周期方法，如componentDidUpdate不会触发。

在以后的Reaction版本中推荐的方法是使用更新者在修改状态以防止竞争条件时使用：

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

与使用非标准状态修改时可能面临的错误相比，内存“浪费”不是一个问题。

更早版本的替代语法

你可以用concat为了获得一个干净的语法，因为它返回一个新数组：

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])})

在ES6中，可以使用扩展算子:

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]})

Answer 2

最简单的，如果你正在使用ES6.

initialArray = [1, 2, 3];newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

新数组将是[1,2,3,4]

更新您的状态反应

this.setState({
         arrayvar:[...this.state.arrayvar, newelement]
       });

了解有关数组破坏的更多信息。

Answer 3

最简单的方法ES6:

this.setState(prevState => ({
    array: [...prevState.array, newElement]}))