React更新state后数组元素丢失id属性问题求助

你遇到的id丢失问题，核心不是splice或者state更新本身的问题——毕竟你console.log里的数组是完全正常的，问题大概率出在React渲染逻辑或表单处理机制上，以下是几个必查的方向：

1. 列表渲染用了index作为key（最常见原因） #

如果渲染列表时你用数组下标当key，比如：

{form[itemName].map((item, index) => (
  <ProductItem key={index} item={item} />
))}

删除元素后，React会复用后续的组件实例。比如删除index=1的元素后，原本index=2的组件会被复用成新的index=1位置，如果组件内部有受控状态（比如表单输入框），就会出现数据错位，看起来像是id丢失，本质是组件状态没和新数据同步。

解决：立刻把key换成对象的唯一id：

{form[itemName].map((item) => (
  <ProductItem key={item.id} item={item} />
))}

2. state更新方式忽略了异步特性 #

你当前用...form直接扩展旧状态，但React的setState是异步的，有可能拿到的form是过期的状态值。换成函数式更新，确保获取最新的state：

function handleRemoveItem(index) {
  setForm(prevForm => {
    const items = [...prevForm[itemName]];
    items.splice(index, 1);
    return { ...prevForm, [itemName]: items };
  });
}

或者用更安全的filter替代splice（避免数组突变的写法）：

function handleRemoveItem(index) {
  setForm(prevForm => ({
    ...prevForm,
    [itemName]: prevForm[itemName].filter((_, idx) => idx !== index)
  }));
}

3. 表单控件的受控绑定有误 #

如果列表项包含表单控件（比如隐藏输入框、编辑框），检查是否正确绑定了id字段。比如如果id对应的控件没设置value，重新渲染时就会被清空：

// 错误示例：id字段未绑定值
<input type="hidden" name="id" />
// 正确示例：绑定item.id
<input type="hidden" name="id" value={item.id} />

如果用了React Hook Form、Formik这类表单库，不要直接修改state，要用库提供的方法（比如setValue、setFieldValue）更新字段，直接改state会绕过库的内部逻辑，导致数据丢失。

4. 验证state的真实值 #

有时候React DevTools的显示可能因引用问题出现偏差，你可以加个useEffect监听form变化，打印真实的state：

import { useEffect } from 'react';

useEffect(() => {
  console.log('最新form状态：', form);
}, [form]);

如果这里打印的数组确实丢了id，就要排查有没有其他副作用函数（比如useEffect、其他事件回调）在修改数组对象时，不小心删除了id字段。

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