React表单中如何使用map更新嵌套JSON值？

我来帮你搞定这个嵌套数组的更新问题～其实思路和你更新subCatagory的name/price是一致的，只不过因为customize是嵌套在subCatagory每一项里的子数组，所以需要两层索引定位：外层的subCatagory项索引，加上内层customize项的索引。

1. 编写处理customize字段更新的函数 #

你可以写一个和现有更新逻辑风格一致的事件处理函数，它接收外层subCatagory的索引sIdx和内层customize的索引cIdx，然后返回一个处理输入变化的函数：

handleCustomizeFieldChange = (sIdx, cIdx) => evt => {
  const { subCatagory } = this.state;
  // 复制整个subCatagory数组，避免直接修改原state
  const updatedSubCatagory = subCatagory.map((subItem, idx) => {
    // 找到目标subCatagory项
    if (idx !== sIdx) return subItem;
    // 复制当前subItem，再处理它的customize数组
    const updatedCustomize = subItem.customize.map((customItem, cIdxInner) => {
      // 找到目标customize项
      if (cIdxInner !== cIdx) return customItem;
      // 这里替换成你实际要更新的字段，比如`value`/`label`等
      return { ...customItem, optionName: evt.target.value };
    });
    // 返回更新后的subItem
    return { ...subItem, customize: updatedCustomize };
  });
  // 更新state
  this.setState({ subCatagory: updatedSubCatagory });
};

2. 在渲染customize项时调用这个函数 #

当你用map渲染subCatagory里的customize数组时，把对应的sIdx（当前sub项的索引）和cIdx（当前customize项的索引）传进去就行，示例如下：

{this.state.subCatagory.map((subItem, sIdx) => (
  <div key={sIdx}>
    {/* 你原来的subCatagory name/price输入框 */}
    <input
      value={subItem.name}
      onChange={this.handlesubCatagoryNameChange(sIdx)}
      placeholder="Sub Category Name"
    />
    <input
      value={subItem.price}
      onChange={this.handlesubCatagoryPriceChange(sIdx)}
      placeholder="Price"
    />
    {/* 渲染customize数组 */}
    {subItem.customize.map((customItem, cIdx) => (
      <div key={cIdx} className="customize-item">
        <input
          value={customItem.optionName} // 替换为你实际的字段名
          onChange={this.handleCustomizeFieldChange(sIdx, cIdx)}
          placeholder="Customize Option"
        />
      </div>
    ))}
    {/* 可选：添加customize项的按钮 */}
    <button onClick={() => this.addCustomizeItem(sIdx)}>Add Customize Option</button>
  </div>
))}

3. 额外补充：添加customize项的逻辑（可选） #

如果你需要给某个subCatagory项添加新的customize条目，也可以用同样的不可变更新方式：

addCustomizeItem = (sIdx) => {
  const { subCatagory } = this.state;
  const updatedSubCatagory = subCatagory.map((subItem, idx) => {
    if (idx !== sIdx) return subItem;
    // 在当前subItem的customize数组末尾添加一个空的默认对象
    return { 
      ...subItem, 
      customize: [...subItem.customize, { optionName: '', value: '' }] 
    };
  });
  this.setState({ subCatagory: updatedSubCatagory });
};

核心原则就是永远不要直接修改state里的数组或对象，而是通过展开运算符...复制出全新的数组/对象，再更新对应的字段，这样才能保证React的state更新机制正常触发组件重新渲染。

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