React CRUD表格修改异常：ID正确但数据未更新

你能拿到正确的ID，说明ID传递和事件绑定没问题，问题基本出在状态更新逻辑或者数据替换环节，下面是几个高频问题点和解决思路：

1. 状态更新违反React不可变原则 #

React只会在状态引用变化时触发重渲染，直接修改原数组/对象不会触发更新。比如你可能这么写：

// 错误：直接修改原数组，引用没变
let updatedList = data;
const targetItem = updatedList.find(item => item.id === editId);
targetItem.title = newTitle;
setData(updatedList);

正确做法是生成新数组/对象：

// 正确：返回新数组，触发重渲染
setData(prevList => 
  prevList.map(item => 
    item.id === editId ? {...item, title: newTitle} : item
  )
);

2. 模态框表单未正确加载待修改数据 #

如果打开模态框时没把对应ID的数据填充到表单，提交的可能是空值或旧值，看起来像没更新。比如打开模态框的逻辑要补全：

const openEditModal = (id) => {
  const targetItem = data.find(item => item.id === id);
  // 把选中项的数据同步到表单状态
  setEditForm({...targetItem}); 
  setIsEditModalOpen(true);
};

3. ID类型不匹配导致替换失败 #

检查editId和数据项的id类型是否一致，比如一个是数字、一个是字符串，===会匹配失败：

// 错误：123 === "123" → false，无法找到对应项
item.id === editId

统一类型即可，比如：

item.id === Number(editId)

4. 异步操作下的状态更新陷阱 #

如果修改逻辑涉及接口请求，要确保用函数式更新获取最新状态，避免闭包导致的旧状态问题：

const handleEditSubmit = async () => {
  await updateItemApi(editId, editForm);
  // 用prevList获取最新的状态，而不是直接用data
  setData(prevList => 
    prevList.map(item => 
      item.id === editId ? {...item, ...editForm} : item
    )
  );
  setIsEditModalOpen(false);
};

5. 表格渲染未绑定最新状态 #

确认表格是直接渲染data状态，而不是初始化时的原始数据。比如如果表格用的是initialData而不是data，自然看不到更新。

如果还是没解决，把handleEditSubmit、模态框初始化、setData调用的代码片段贴出来，能更快定位问题。

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