Question

我遇到了国家不变性的问题。简而言之，组件的状态包含“人员”对象数组，每个对象都有一个name属性，我可以在onChange事件上更新该值。这是更新程序

nameChangedHandler = (event, id) => {
    const value = event.target.value;
    const persons = this.state.persons.map((pers) => {
      if (pers.id === id) {
        pers.name = value;
      }

      return pers;
    });

    this.setState((prevState) => {
      console.log(prevState);
      return {
        persons
      }
    });
  }

此代码对我来说效果很好，并且可以更新某个人的name属性，但是我注意到this.setState函数会改变以前的状态。

我猜测原因可能在map函数中。但是怎么可能呢？据我所知，map使用previos数组并返回一个新数组。然后将此新数组作为setState函数中的一个新数组分配给persons属性

Answer 1

const persons = this.state.persons.map( pers => { // Do the shallow copy if (pers.id === id) { return { ...pers, name: value }; } // Return the reference, because we don't do any mutations return pers; });创建一个新数组，但是数组内部的对象仍然引用该状态的对象。

一种方法是将状态对象浅复制到新数组中：

[\\" field_name \\"]

仅当Person对象是原始值时，上述方法才能正确运行。否则，您应该进行深度复制。

您还可以检查Immutable.js来处理不可变处理的更安全。

反应setState prevState参数和Array＃map

1 个答案: