javascript - 错误 : Attempting to set key on an object that is immutable and has been frozen

Question

我很难找到与此错误相关的问题，显然这意味着我正在尝试更新不可变对象(immutable对象)。奇怪的是，我之前使用过这个实现没有任何障碍，这就是为什么我发现这种行为如此令人困惑。

下面是我正在使用的方法，它只是改变数组的对象，改变属性并返回更新后的状态。作为引用 here ，使用 prevState 似乎是绕过不变性的最佳方式。

onCheck = (id) => {
  this.setState((prevState) => {
    prevState.options[id].checked = !prevState.options[id].checked;
    return {
      options: prevState.options,
      dataSource: prevState.cloneWithRows(prevState.options)
    };
  });
}

我也尝试了多种复制 prevState 的变体，但它仍然给我同样的不变性错误。它似乎仍然引用而不是复制 prevState。

 onCheck = (id) => {
    this.setState((prevState) => {
      let options = [...prevState.options];
      options[id].checked = !options[id].checked;
      return {
        options: options,
        dataSource: this.state.cloneWithRows(options)
      };
    });
  }

Answer 1

我最终找到了解决方案，看来我不仅需要复制数组，还需要复制数组的每个元素。由于数组的各个元素/对象仍然不可变/卡住。

onCheck = (id) => {
    this.setState((prevState) => {
      const newOptions = prevState.options.map((option, index) => {
        let copyOption = {...option};
        if (id == index) {
          copyOption.checked = !copyOption.checked;
        }
        return copyOption;
      });
      return {
        options: newOptions,
        dataSource: this.state.dataSource.cloneWithRows(newOptions)
      };
    });
  }