以这种方式覆盖 React 状态数组是否好？

Question

请这不是一个重复的问题。我的问题是，如果我将状态数组分配给局部变量并将值推送到局部变量，是否会导致错误。

我陷入了一种情况，以了解将值推入 React 状态数组或覆盖值时哪个是正确的。

根据 React 文档，以下代码是一种糟糕的风格并导致错误

   this.state = {
        list: []
  }

  componentDidMount(){
      const { list } = this.state;
      list.push(“test”);//this is bad style of pushing values into React state and causes a bug
      this.setState({list});
 }

如果我像下面那样做，会导致错误吗？将状态列表分配给局部变量并将值推送到该局部变量并将数组的状态设置为列表。这和上面的代码一样吗？

  this.state = {
        list: []
  }
  componentDidMount(){
      const { list } = this.state;
      const array = list;
      array.push(“test”); //pushing values to a local variable  too a bad style and causes a bug in React?
      this.setState({list: array});
 }

Answer 1

是的，你的第二种方法也会导致错误，因为状态数组在这个阶段得到更新 { array.push(“test”); }. 如果您的类是 PureComponent，则它不会重新渲染。

所以你可以试试这个

 const list = [... this.state.list];

或者

 const list = this.state.list.slice();

这样它就创建了一个数组的副本。

您的新代码如下所示：-

const list = [... this.state.list];
list.push("new value");
this.setState({ list });