React中如何更新嵌套state？如何用onChange修改内层JSON值

我来帮你梳理下怎么用ES6的方式更新嵌套在subCatagory里的customize字段，核心要记住React状态是不可变的，不能直接修改原state，得通过复制+修改的方式来更新。

首先修正JSX里的小问题 #

你内层map用了和外层一样的idx变量名，会导致变量冲突，建议改成不同的命名，比如内层用custIdx；另外你原来的customize输入框是type="number"但绑定的是名称字段，改成type="text"更合理：

{subCatagory.customize.map((customOption, custIdx) => (
  <div key={custIdx}>
    <input 
      type="text" 
      placeholder={`Custom Option #${custIdx + 1} name`} 
      value={customOption.name} 
      onChange={this.handleCustomizeNameChange(idx, custIdx)} 
    />
  </div>
))}

方法一：分步复制更新（清晰直观） #

用ES6的扩展运算符(...)做浅复制，逐层修改嵌套的字段，这种方式逻辑清晰，容易调试：

// 更新customize里的name字段
handleCustomizeNameChange = (subCatIdx, custIdx) => (e) => {
  // 1. 复制整个subCatagory数组
  const updatedSubCatagory = [...this.state.subCatagory];
  // 2. 复制当前要修改的子分类对象
  const targetSubCat = {...updatedSubCatagory[subCatIdx]};
  // 3. 复制当前子分类的customize数组
  const updatedCustomize = [...targetSubCat.customize];
  // 4. 修改目标customize项的name，同时保留其他字段
  updatedCustomize[custIdx] = {
    ...updatedCustomize[custIdx],
    name: e.target.value
  };
  // 5. 把修改后的customize放回子分类对象
  targetSubCat.customize = updatedCustomize;
  // 6. 把子分类对象放回数组
  updatedSubCatagory[subCatIdx] = targetSubCat;
  // 7. 最后更新state
  this.setState({ subCatagory: updatedSubCatagory });
};

// 添加新的customize项
addNewCust = (subCatIdx) => () => {
  const updatedSubCatagory = [...this.state.subCatagory];
  const targetSubCat = {...updatedSubCatagory[subCatIdx]};
  // 新增一个空的自定义项，你可以根据需求添加默认字段
  targetSubCat.customize = [...targetSubCat.customize, { name: '', price: '' }];
  updatedSubCatagory[subCatIdx] = targetSubCat;
  this.setState({ subCatagory: updatedSubCatagory });
};

方法二：函数式更新+链式map（更简洁） #

利用setState的函数式更新特性，结合map方法来批量处理，这也是很常用的ES6写法，适合嵌套层级不深的场景：

handleCustomizeNameChange = (subCatIdx, custIdx) => (e) => {
  this.setState(prevState => ({
    subCatagory: prevState.subCatagory.map((subCat, idx) => {
      // 不是目标子分类就直接返回原对象
      if (idx !== subCatIdx) return subCat;
      // 是目标子分类的话，更新它的customize数组
      return {
        ...subCat,
        customize: subCat.customize.map((custOption, cIdx) => {
          // 不是目标customize项就返回原对象
          if (cIdx !== custIdx) return custOption;
          // 修改目标项的name字段
          return { ...custOption, name: e.target.value };
        })
      };
    })
  }));
};

额外提醒 #

1. 所有事件处理函数都用柯里化箭头函数的方式传递参数（比如(subCatIdx) => () => {}），避免每次渲染都创建新的函数实例，影响性能。
2. 如果你需要更新customize里的其他字段（比如price），只需要在修改的时候对应替换字段名即可，逻辑是一样的。

内容的提问来源于stack exchange，提问作者User_3535