我想在state数组末尾添加一个元素,这是正确的方法吗?
state
this.state.arrayvar.push(newelement); this.setState({ arrayvar:this.state.arrayvar });
我担心就地修改数组push可能会引起麻烦-安全吗?
push
制作数组副本的替代方法setState似乎很浪费。
setState
React 文档说:
将 this.state 视为不可变的。
您push将直接改变状态,这可能会导致容易出错的代码,即使您之后再次“重置”状态。F.ex,它可能会导致一些生命周期方法,如componentDidUpdate赢得触发器。
componentDidUpdate
在更高版本的 React 中推荐的方法是在修改状态时使用 更新 器函数来防止竞争条件:
this.setState(prevState => ({ arrayvar: [...prevState.arrayvar, newelement] }))
与使用非标准状态修改可能面临的错误相比,内存“浪费”不是问题。
早期 React 版本的替代语法
您可以使用concat它来获得一个干净的语法,因为它返回一个新数组:
concat
this.setState({ arrayvar: this.state.arrayvar.concat([newelement]) })
在 ES6 中,您可以使用扩展运算符:
this.setState({ arrayvar: [...this.state.arrayvar, newelement] })