抽屉编辑表单提交后数据没更新，是状态没同步吗？

UX志燕提问于 2026-03-15 17:31:22 阅读 45

交互

我在用 Ant Design 的 Drawer 做一个编辑功能，点击“编辑”打开抽屉，填完表单点保存，但列表里的数据没变。我明明在父组件里调了 setState，是不是抽屉里的表单值没传出去？

试过在 onOk 里直接打印 form.getFieldsValue() 是对的，但传给父组件后页面不刷新。是不是我状态更新的方式有问题？

const handleSave = () => {
  form.validateFields().then(values => {
    onUpdate(record.id, values); // 父组件传进来的函数
    onClose(); // 关闭抽屉
  });
};

我来解答赞 5 收藏

反馈

1 条解答

一国玲 Lv1

看了你的代码，问题大概率出在父组件的 onUpdate 实现上，而不是抽屉组件这边。

你打印 form.getFieldsValue() 是对的，说明值是能拿到的。问题很可能是父组件更新状态的方式——你很可能是直接修改了原数组里的对象，而不是创建新的对象引用。

比如可能是这样写的：

const handleUpdate = (id, values) => {
const newList = list.map(item => {
if (item.id === id) {
return { ...item, ...values }; // 这里看起来好像创建了新对象
}
return item;
});
setList(newList);
};

如果上面这样写其实没问题，但有时候会写成这样：

const handleUpdate = (id, values) => {
const index = list.findIndex(item => item.id === id);
if (index !== -1) {
list[index] = { ...list[index], ...values }; // 直接修改原数组元素
setList([...list]); // 只做了浅拷贝，但数组元素还是同一个引用
}
};

这样 React 检测不到变化，因为对象引用没变。

你把父组件的 onUpdate 函数代码贴出来，我帮你看看具体是哪里写错了。或者你直接检查下：更新的时候有没有用展开运算符创建新的对象，而不是修改原对象。

2026-03-16 22:06