React动态表单删除功能异常：UI与数据不一致问题排查

问题根源 #

你遇到的UI与数据不同步问题，核心原因是用数组索引i作为React元素的key。当删除数组中间元素后，剩余元素的索引会重新排序，React的diff算法会错误地复用旧组件实例——比如删除第2项后，原第3项的索引变为2，React会认为这是原第2项组件，仅更新内容而非重新渲染正确元素，最终导致UI显示和实际数据不匹配。

修复步骤 #

1. 给每个环境对象添加唯一ID #

在创建Landing Zone Environments元素时，为每个对象生成唯一标识（示例用时间戳，生产环境推荐用uuid库）：

// 新增环境的函数示例（如果已有请调整）
const addEnvironment = () => {
  const newEnv = {
    id: Date.now(), // 临时唯一ID，生产环境可替换为uuid.v4()
    Name: '',
    'Advisor Email': ''
  };
  setValue(prev => ({
    ...prev,
    'Landing Zone Environments': [...prev['Landing Zone Environments'], newEnv]
  }));
};

2. 修改删除函数，按ID定位删除元素 #

不再依赖数组索引，通过唯一ID筛选要保留的元素：

const handleremove = (envId) => {
  setValue(prev => ({
    ...prev,
    'Landing Zone Environments': prev['Landing Zone Environments'].filter(env => env.id !== envId)
  }));
};

3. 渲染时用唯一ID作为key #

将map渲染中的key从索引i替换为对象的id：

{
  value['Landing Zone Environments'].map((env) => (
    <div key={env.id}>
      <div>
        <label>Name</label>
        <input 
          type="text" 
          name="Name" 
          required={false} 
          placeholder="Example: prod" 
          value={env.Name} // 绑定value实现受控组件，避免输入状态异常
          onChange={e => handleinputchange(e, env.id)} // 改为用id定位元素
        />
      </div>
      <div>
        <label>Advisor Email</label>
        <input 
          type="text" 
          name="Advisor Email" 
          placeholder="Example: advisor@invalid.xyz" 
          value={env['Advisor Email']} // 绑定value实现受控组件
          onChange={e => handleinputchange(e, env.id)}
        />
      </div>
      <div>
        <button className="minus_button" onClick={() => handleremove(env.id)}>-</button>
      </div>
      {/* 其他内容 */}
    </div>
  ))
}

4. 同步修改输入变更函数 #

将原来依赖索引的handleinputchange改为用ID定位元素：

const handleinputchange = (e, envId) => {
  const { name, value: inputValue } = e.target;
  setValue(prev => ({
    ...prev,
    'Landing Zone Environments': prev['Landing Zone Environments'].map(env => 
      env.id === envId ? { ...env, [name]: inputValue } : env
    )
  }));
};

额外建议 #

• 尽量将表单元素设置为受控组件（绑定value属性），确保输入状态与数据完全同步，避免出现输入内容和数据不一致的问题。
• 生产环境生成唯一ID时，推荐使用uuid库（执行npm install uuid安装），比时间戳更可靠，可避免极端场景下的ID重复。

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