在React.js中正确修改状态数组

Question

我想在状态数组的末尾添加一个元素，这是正确的方法吗？

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

我担心使用push修改阵列可能会导致问题-安全吗？

另一种方法是复制数组，然后setStateing这似乎是浪费。

Answer 1

使用ES6的最简单方法：

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

Answer 2

如果您使用的是ES6，则最简单。

initialArray = [1, 2, 3];

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

新阵列将是[1,2,3,4]

要在React中更新您的状态

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

了解有关阵列分解的详细信息

Answer 3

反应文档说：

对待this.state就好像它是不可改变的。

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

在以后的React版本中，建议在修改状态以防止竞争条件时使用更新程序函数：

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

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

早期版本的替代语法

您可以使用conat获得一个干净的语法，因为它返回一个新数组：

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

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

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