javascript - 有没有办法在 JavaScript 中修改部分响应数据时保留 api 响应数据

Question

在某些情况下，我想通过比较当前状态与从 API 获得的原始数据来验证 React 应用程序中的数据。当我需要修改数组中的嵌套元素时，我在保留原始数据时遇到了问题。

例如，使用此数据：

{
  id: 1,
  items: [{name: "foo"}, {name: "bar"}]
}

以及以下 React 组件摘录：

constructor(props) {
  super(props);
  this.state = {
    originalData: null,
    items: [],
  };
}

componentDidMount() {
  Api.get("/data").then(res => {
    this.setState({
      originalData: res.data,
      items: res.data.items,
    }
  });  
}

如果this.state.items[0]变为{name: "baz"},this.state.originalData.items[0]也会被修改。我在设置时尝试使用res.data.items.slice()并[...res.data.items]制作数组的副本，this.state.items但没有帮助。

我能看到的两个解决方案是：

1. 在验证当前状态时调用 API 以获取原始数据
2. 用于JSON.parse(JSON.stringify(res.data))存储不引用res.data内部的新对象this.state.originalData。

有没有更优雅的解决方案？

标签： javascriptreactjsimmutability