React动态表单中嵌套State字段的更新问题

我明白你现在卡在React嵌套状态更新的问题上了——动态表单的多层嵌套state确实容易踩坑，尤其是要保证每一步都遵循React的immutable更新原则，同时还要处理好事件绑定的细节。咱们一步步来解决：

首先，修正事件处理函数的绑定方式 #

你现在的写法比如onChange={this.handlesubCatagoryNameChange(idx)}会在组件渲染时立即执行这个函数，而不是在输入变化时触发。正确的做法是返回一个新的函数，把事件对象和索引传进去：

比如把：

onChange={this.handlesubCatagoryNameChange(idx)}

改成：

onChange={(e) => this.handlesubCatagoryNameChange(idx, e)}

同理，handlesubCatagoryPriceChange、addNewCust、handleRemovesubCatagory这些函数的调用都要做同样的修改。

核心：嵌套状态的Immutable更新 #

React的state是不可直接修改的，尤其是嵌套的数组和对象，必须每一层都创建新的副本，避免直接修改原state导致React无法检测到变化。针对你的subCatagory和customize两层嵌套结构，我们可以这样处理：

1. 实现通用的handlesubCatagoryChange函数 #

这个函数需要接收子分类索引、要修改的字段（这里是customize）、自定义项索引，以及事件对象，然后逐层拷贝state进行更新：

handlesubCatagoryChange = (subIdx, field, custIdx, e) => {
  const { value } = e.target;
  // 先拷贝整个state的subCatagory数组
  const updatedSubCatagories = [...this.state.subCatagory];
  // 拷贝当前要修改的子分类对象
  const updatedSubCat = { ...updatedSubCatagories[subIdx] };
  // 拷贝当前子分类的customize数组
  const updatedCustomizes = [...updatedSubCat[field]];
  // 修改指定索引的customize项的name
  updatedCustomizes[custIdx] = { ...updatedCustomizes[custIdx], name: value };
  // 把更新后的customize数组放回子分类对象
  updatedSubCat[field] = updatedCustomizes;
  // 把更新后的子分类放回数组
  updatedSubCatagories[subIdx] = updatedSubCat;
  // 最后更新state
  this.setState({ subCatagory: updatedSubCatagories });
};

2. 其他辅助函数的实现 #

为了保持一致性，其他状态更新函数也要遵循同样的immutable原则：

// 修改子分类名称
handlesubCatagoryNameChange = (subIdx, e) => {
  const { value } = e.target;
  const updatedSubCatagories = [...this.state.subCatagory];
  updatedSubCatagories[subIdx] = { ...updatedSubCatagories[subIdx], name: value };
  this.setState({ subCatagory: updatedSubCatagories });
};

// 修改子分类价格
handlesubCatagoryPriceChange = (subIdx, e) => {
  const { value } = e.target;
  const updatedSubCatagories = [...this.state.subCatagory];
  updatedSubCatagories[subIdx] = { ...updatedSubCatagories[subIdx], price: value };
  this.setState({ subCatagory: updatedSubCatagories });
};

// 删除子分类
handleRemovesubCatagory = (subIdx) => {
  const updatedSubCatagories = this.state.subCatagory.filter((_, idx) => idx !== subIdx);
  this.setState({ subCatagory: updatedSubCatagories });
};

// 添加新的自定义项
addNewCust = (subIdx) => {
  const updatedSubCatagories = [...this.state.subCatagory];
  updatedSubCatagories[subIdx] = {
    ...updatedSubCatagories[subIdx],
    customize: [...updatedSubCatagories[subIdx].customize, { name: '' }]
  };
  this.setState({ subCatagory: updatedSubCatagories });
};

修改后的完整表单JSX #

把事件绑定修正后的代码替换原来的部分：

{this.state.subCatagory.map((subCatagory, idx) => (
  <div className="subCatagory" key={idx}>
    <input
      type="text"
      placeholder={`Enter Dish #${idx + 1} name`}
      value={subCatagory.name}
      onChange={(e) => this.handlesubCatagoryNameChange(idx, e)}
    />
    <input
      type="number"
      placeholder={`subCatagory #${idx + 1} price`}
      value={subCatagory.price}
      onChange={(e) => this.handlesubCatagoryPriceChange(idx, e)}
    />
    <button
      type="button"
      onClick={() => this.handleRemovesubCatagory(idx)}
      className="small"
    >
      Delete
    </button>
    <button
      type="button"
      onClick={() => this.addNewCust(idx)}
      className="small"
    >
      is cust availble?
    </button>
    {subCatagory.customize.map((customize, custIdx) => (
      <div key={custIdx}>
        <input
          type="text"
          placeholder={`Customize #${custIdx + 1} name`}
          value={customize.name}
          onChange={(e) => this.handlesubCatagoryChange(idx, 'customize', custIdx, e)}
        />
      </div>
    ))}
  </div>
))}

额外提示 #

如果你的表单嵌套层级更深，或者状态更复杂，可以考虑使用immer库来简化immutable更新的代码，它允许你用“ mutable”的写法来写，但实际会生成不可变的状态，减少手动拷贝的繁琐。

比如用immer改写handlesubCatagoryChange：

import produce from 'immer';

handlesubCatagoryChange = (subIdx, field, custIdx, e) => {
  const { value } = e.target;
  this.setState(produce(draft => {
    draft.subCatagory[subIdx][field][custIdx].name = value;
  }));
};

这样代码会简洁很多，不过这是可选的优化方案，核心还是要理解immutable更新的原则。

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