如何在 React 中更改嵌套 object 内的 state

Question

嗨，我有父子组件。 父组件正在从服务器接收数据。 此数据保存在 state.data 中。 现在，当我在子组件中执行操作时，它应该是来自父 controller 的调用方法。 现在正在工作。 问题出在我正在调用的这个方法中。 我收到 id 作为参数。 父项中的此数据具有项目（包）列表，并且每个项目都有 id。 我只需要通过 id 更新其中一个（或其他我不知道正确方式的方式）。 请问我该怎么做？ 我需要更新 isOpen state 仅通过单击子组件中的按钮打开一个项目

changeIsOpenState(typeOfPart: Number, id: Number) {
        console.log(this.state.data.packages);
        const selectedObject = this.state.data.packages.filter((obj) => {
            const val= (obj.id === id) ? obj : false;
            return val;
        });
    }

我要更新的数据数组（isOpen 属性）。

Answer 1

不变的呢？ 我认为您可以通过这种方式使用dot-prop-immutable package：

const state = {
  packages: [
    { isOpen: false, id: 1 },
    { isOpen: false, id: 2 },
    { isOpen: false, id: 3 }
  ]
};
const index = state.packages.findIndex(obj => obj.id === 3);
const newState = dotProp.set(state, `packages[${index}].isOpen`, true);

Answer 2

你可以这样做：

changeIsOpenState(typeOfPart: Number, id: Number) {
  // Copy the packages so you won't mumtate your state directly
  const packages = Object.assign({}, ...this.StaticRange.data.packages);

  // Get the package to edit and its index in the packages object
  let packageIndex;
  let packageToEdit;

  for(let i = 0; i <= packages.length; i++){
    if(packages[i].id === id){
      packageIndex = i;
      packageToEdit = packages[i];
      packageToEdit.isOpen = true
    }
  }
  packages[packageIndex] = packageToEdit;
  setState({...this.state, data:{...this.state.data, packages}});
}

Answer 3

我是这样做的： 1.我将当前数据复制到另一个变量 2.按 id 过滤数据 3.保存具有相同 id 的项目的数组键 4.用否定更改克隆值 5.将新数据保存到 state

 changeIsOpenState(typeOfPart: Number, id: Number) {
        const subjectDataCopy = cloneDeep(this.state.data);
        const keys = [];
        subjectDataCopy.packages.filter((obj, key) => {
            if (obj.id === id) {
                keys.push(key);
            }
        });
        subjectDataCopy.packages[keys[0]].isOpen = !subjectDataCopy.packages[keys[0]].isOpen;
        this.setState({data: subjectDataCopy});
    }

如果有更好的选择，请告诉我:)