在ReactJS中正确修改状态数组

在ReactJS中正确修改状态数组

该阵营的文档说：

将此this.state视为不可变的。

您

push

将直接更改状态，即使您此后再次“重置”状态，也有可能导致易于出错的代码。F.ex，它可能导致某些生命周期方法（如

componentDidUpdate

不会触发）。

在更高版本的React中，建议的方法是在修改状态以防止竞争情况时使用 updater 函数：

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

与使用非标准状态修改可能会遇到的错误相比，内存“浪费”不是问题。

早期React版本的替代语法

您可以使用

concat

干净的语法，因为它会返回一个新数组：

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

在ES6中，您可以使用Spread运算符：

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