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

Question

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

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

我担心使用 push 就地修改数组可能会导致麻烦 - 它安全吗？

制作数组副本的替代方法和 setState 似乎很浪费。

原文由 fadedbee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 文档 说：

将 this.state 视为不可变的。

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

在更高版本的 React 版本中推荐的方法是在修改状态时使用 更新 函数来防止竞争条件：

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

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

早期 React 版本的替代语法

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

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

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

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

原文由 David Hellsing 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

了解有关数组解构的更多信息

原文由 StateLess 发布，翻译遵循 CC BY-SA 4.0 许可协议