javascript - 以这种方式覆盖 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 });