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]}))