Javascript 如何在React中更改嵌套对象内的状态

嗨，我有parrent和child组件。Parrent组件正在从服务器接收数据。此数据保存在state.data中。现在，当我在子组件中执行操作时，它应该是来自parrent控制器的调用方法。这正在起作用。问题在于我调用的这个方法内部。我正在接收id作为参数。parrent中的此数据包含项目（包）列表，每个项目都有id。我只需要按id更新其中一个（或以其他方式，我不知道正确的方式）。请问我怎么做？我只需要通过单击子组件中的按钮来更新打开的一项的等参状态 我的方法（但我不确定我是否开始以正确的方式做这件事），我在这个问题上花了一段时间：

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属性）

---

不可变的呢？我认为你可以这样使用软件包：

const state={
套餐：[
{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）；

不可变的呢？我认为你可以这样使用软件包：

const state={
套餐：[
{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）；

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

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

如果有更好的选择，请告诉我：）

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

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

---

如果有更好的选择，请让我知道：）

您可以用ol'方式：

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

changeIsOpenState（零件类型：编号，id:编号）{
//复制包，这样您就不会直接说出您的状态
const packages=Object.assign（{}，…this.StaticRange.data.packages）；
//获取要编辑的包及其在packages对象中的索引
让包装索引；
让packageToEdit；
对于（假设i=0；i你可以用ol’方式：

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

changeIsOpenState（零件类型：编号，id:编号）{
//复制包，这样您就不会直接说出您的状态
const packages=Object.assign（{}，…this.StaticRange.data.packages）；
//获取要编辑的包及其在packages对象中的索引
让包装索引；
让packageToEdit；
for（设i=0；i