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

标签 javascript reactjs react-native immutability

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

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

Immutable Error

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)
      };
    });
  }

最佳答案

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

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)
      };
    });
  }

关于javascript - 错误 : Attempting to set key on an object that is immutable and has been frozen,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46057230/

相关文章:

javascript - 谷歌 Youtube 数据 API : Private videos with API key

javascript - 用 map (或循环)展平对象数组

javascript - 安装和实现 react native 设备信息时出错

javascript - NextJS 页面名称与 url 名称不同

javascript - d3 在附加的 div 之后附加空格

javascript - 即使在 JavaScript 中设置焦点后,Tab 事件也会更改焦点

javascript - 如何有效地检查鼠标是否位于 HTML5 Canvas 中的许多(120)个不同区域?

javascript - 在 React-Native 中将字符串值从一个页面传递到另一个页面

laravel - React Native 和 Laravel API

javascript - 使用函数运行函数