React表单嵌套对象赋值异常：属性未存入正确层级

你的核心问题是表单字段名未与嵌套结构层级对应，直接使用itemData[i][e.target.name]会把嵌套属性塞到对象根层级。要解决这个问题，关键是让handleChange能识别字段对应的嵌套路径，再逐层完成赋值。

步骤1：规范表单字段命名 #

给输入框的name属性设置能体现嵌套层级的格式，推荐两种方式：

• 点分隔示例：image_lateral.0.title（表示第0个image_lateral数组项的title属性）
• 下划线分隔示例：image_lateral_0_title（含义同上）

步骤2：修改handleChange解析字段路径 #

根据你选择的命名格式，在handleChange中解析字段名，定位到嵌套位置后再赋值。以下是两种常见实现：

实现1：处理点分隔的字段名 #

const handleChange = (e, itemIndex) => {
  const { name, value } = e.target;
  // 拆分字段路径，将"image_lateral.0.title"拆成["image_lateral", "0", "title"]
  const pathSegments = name.split('.');
  
  // 深拷贝原数据，避免直接修改state导致更新异常
  const updatedItems = [...itemData];
  let currentLevel = updatedItems[itemIndex];
  
  // 逐层遍历到目标属性的父节点
  for (let i = 0; i < pathSegments.length - 1; i++) {
    const key = pathSegments[i];
    // 处理数组索引（转成数字类型）
    currentLevel = currentLevel[key] = isNaN(Number(key)) ? currentLevel[key] : currentLevel[key][Number(key)];
  }
  
  // 给目标属性赋值
  currentLevel[pathSegments[pathSegments.length - 1]] = value;
  
  setItemData(updatedItems);
};

实现2：处理下划线分隔的字段名 #

如果使用image_lateral_0_title这种命名方式：

const handleChange = (e, itemIndex) => {
  const { name, value } = e.target;
  const [nestedKey, nestedIndexStr, propName] = name.split('_');
  const nestedIndex = Number(nestedIndexStr);
  
  const updatedItems = [...itemData];
  // 直接定位到嵌套属性完成赋值
  updatedItems[itemIndex][nestedKey][nestedIndex][propName] = value;
  
  setItemData(updatedItems);
};

关键注意事项 #

• 必须深拷贝原状态数据：如果直接修改itemData里的嵌套对象/数组，React无法检测到状态变化，会导致视图不更新。
• 字段命名要与嵌套结构严格对应：比如数组的索引要和你要操作的image_lateral数组项位置一致。
• 若嵌套层级复杂，可使用lodash.set简化逻辑（无需自行写解析）：

  import _ from 'lodash';
  
  const handleChange = (e, itemIndex) => {
    const { name, value } = e.target;
    const updatedItems = [...itemData];
    _.set(updatedItems[itemIndex], name, value);
    setItemData(updatedItems);
  };
  

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