小编典典

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

all

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

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

我担心就地修改数组push可能会引起麻烦-安全吗?

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


阅读 90

收藏
2022-03-09

共1个答案

小编典典

React 文档说:

将 this.state 视为不可变的。

push将直接改变状态,这可能会导致容易出错的代码,即使您之后再次“重置”状态。F.ex,它可能会导致一些生命周期方法,如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]
})
2022-03-09