React状态管理：嵌套数组操作使用event.target.name替代硬编码键

你遇到的核心问题是：在JavaScript对象字面量中使用变量作为键名时，必须用方括号[]包裹变量，且更新State时要保留原有属性，不能直接覆盖整个对象。以下是针对你代码的修复方案：

修复addClick函数 #

const addClick = (event) => {
  const key = event.target.name;
  // 用函数式更新确保基于最新State修改，同时保留其他属性
  setValue(prevValue => ({
    ...prevValue,
    [key]: [...(prevValue[key] || []), ""] // 处理键未初始化的情况，默认用空数组
  }));
};

• 用[key]动态指定对象键名，替代硬编码的DevOps
• ...prevValue保留State中其他嵌套数组的数据，避免丢失
• prevValue[key] || []防止该键未定义时抛出错误

修复removeClick函数 #

const removeClick = (event) => {
  const key = event.target.name;
  const index = Number(event.target.id);
  
  setValue(prevValue => {
    const updatedArr = [...(prevValue[key] || [])];
    // 校验索引合法性，避免越界报错
    if (index >= 0 && index < updatedArr.length) {
      updatedArr.splice(index, 1);
    }
    return {
      ...prevValue,
      [key]: updatedArr
    };
  });
};

• 同样用[key]动态访问和修改目标数组
• 函数式更新确保拿到最新的State状态
• 增加索引校验，防止无效索引导致的异常

修复遍历渲染代码 #

{value[input[form].name]?.map((el, i) => (
  <div key={i}>
    <Array
      name={input[form].name}
      placeholder={input[form].placeholder}
      required={input[form].required}
      key={`${input[form].placeholder}-${i}`} // 结合索引避免key重复
      el={el}
      i={i}
      handleChange={(event) => handleChange(event, input[form].input_type)}
      removeClick={() => removeClick({ target: { name: input[form].name, id: i } })} // 直接构造目标对象，传递更清晰
    />
  </div>
))}

• 用value[input[form].name]动态访问目标数组
• ?.可选链操作符，避免数组未定义时抛出渲染错误
• 优化removeClick的传递方式，直接构造event参数，替代bind写法
• 给组件key增加索引后缀，避免同类型组件key重复

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