React.js嵌套表单更新问题：subCatagory的customize值无法更新

兄弟，你这个问题核心在于React状态更新的不可变性原则没落实到位——嵌套数组/对象的更新不能直接修改原状态，必须创建新的副本，否则React检测不到状态变化，自然不会更新输入值。我给你拆解下解决方案：

一、先修正好customize的新增逻辑 #

你之前的addCustomize函数可能直接修改了原数组，现在改成函数式更新，逐层复制状态：

addCustomize = (subIndex) => {
  this.setState(prevState => {
    // 复制整个subCatagory数组，避免修改原状态
    const newSubCatagory = [...prevState.subCatagory];
    // 复制当前要修改的subCatagory对象
    const targetSubItem = { ...newSubCatagory[subIndex] };
    // 复制customize数组并添加新的空项（结构可按你需求调整）
    targetSubItem.customize = [...targetSubItem.customize, { name: '', value: '' }];
    // 把修改后的对象放回数组
    newSubCatagory[subIndex] = targetSubItem;
    return { subCatagory: newSubCatagory };
  });
};

二、处理customize输入框的 onChange 事件 #

同样要逐层复制状态，确保每一层都是新引用：

handleCustomizeChange = (subIndex, custIndex, e) => {
  const { name, value } = e.target;
  this.setState(prevState => {
    // 第一步：复制外层subCatagory数组
    const updatedSubCatagory = [...prevState.subCatagory];
    // 第二步：复制当前subCatagory项
    const updatedSubItem = { ...updatedSubCatagory[subIndex] };
    // 第三步：复制customize数组
    const updatedCustomize = [...updatedSubItem.customize];
    // 第四步：修改目标customize项，创建新对象避免修改原状态
    updatedCustomize[custIndex] = { ...updatedCustomize[custIndex], [name]: value };
    // 逐层回填修改后的内容
    updatedSubItem.customize = updatedCustomize;
    updatedSubCatagory[subIndex] = updatedSubItem;
    return { subCatagory: updatedSubCatagory };
  });
};

三、渲染customize项的示例代码 #

在你原来的subCatagory map循环里，嵌套渲染customize输入项：

{this.state.subCatagory.map((subItem, subIndex) => (
  <div key={subIndex}>
    {/* 原有的subCatagory输入框 */}
    <input
      type="text"
      name="name"
      value={subItem.name}
      onChange={(e) => this.handleSubCatChange(subIndex, e)}
      placeholder="子分类名称"
    />
    <input
      type="text"
      name="price"
      value={subItem.price}
      onChange={(e) => this.handleSubCatChange(subIndex, e)}
      placeholder="价格"
    />
    {/* 添加customize按钮 */}
    <button onClick={() => this.addCustomize(subIndex)}>添加自定义项</button>
    {/* 渲染customize输入项 */}
    {subItem.customize.map((custItem, custIndex) => (
      <div key={custIndex}>
        <input
          type="text"
          name="name"
          value={custItem.name}
          onChange={(e) => this.handleCustomizeChange(subIndex, custIndex, e)}
          placeholder="自定义项名称"
        />
        <input
          type="text"
          name="value"
          value={custItem.value}
          onChange={(e) => this.handleCustomizeChange(subIndex, custIndex, e)}
          placeholder="自定义项值"
        />
      </div>
    ))}
  </div>
))}

关键提醒 #

• 一定要用函数式更新（给setState传函数，依赖prevState），因为React的状态更新是异步的，直接用this.state可能拿到旧值。
• 每一层嵌套的数组/对象都要复制，不能直接修改原对象——比如不能写prevState.subCatagory[subIndex].customize.push(...)，这会直接修改原状态，React检测不到变化。
• 如果嵌套层级更深，建议用Immer这类库简化不可变更新的代码，手动复制会比较繁琐。

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