抽屉编辑时如何保持数据与父组件同步？

程序员茜茜提问于 2026-02-07 10:52:35 阅读 43

交互

在用Ant Design的Drawer做表单编辑时，修改数据后关闭抽屉，父组件的表格数据没及时更新，是什么问题啊？

我这样写的：父组件通过useState保存数据列表，点击编辑按钮时把当前行数据传给Drawer组件。在Drawer里用表单组件绑定本地状态，提交时调用父组件传来的setFormData方法。但发现父组件的状态始终是旧数据，除非手动刷新页面。

尝试过在onClose时手动触发更新：onClose={() => { setFormData([...formData]); }} 但控制台报错”Too many re-renders”。用useEffect监听formData变化也没反应…


// 父组件片段
const [formData, setFormData] = useState([]);
const handleEdit = (row) => {
  setFormData({ ...row });
  setDrawerVisible(true);
};

// 抽屉组件
<Form 
  initialValues={formData}
  onFinish={(values) => {
    setFormData(values); // 这里可能有问题？
    setDrawerVisible(false);
  }}
/>

我来解答赞 6 收藏

反馈

2 条解答

上官紫瑶 Lv1

你这个问题是典型的受控组件状态同步问题。核心在于Form的initialValues只在第一次渲染时生效，后面改formData表单也不会更新。

复制这个：

把抽屉里的Form改成受控模式，用form.setFieldsValue监听编辑项变化。

父组件不用动，保持handleEdit就行：

const [form] = Form.useForm();



useEffect(() => {

  if (drawerVisible) {

    form.setFieldsValue(formData);

  }

}, [drawerVisible, formData, form]);

然后抽屉里这样写：

<Form 

  form={form}

  onFinish={(values) => {

    setFormData(prev => prev.map(item => 

      item.id === values.id ? values : item

    ));

    setDrawerVisible(false);

  }}

/>

关键点两个：一是用form实例手动设置字段值，二是提交时用map去更新对应行数据。别直接setFormData(values)，你这是对象，不是数组。

还有那个onClose无限重渲染是因为你在render里直接调用setFormData([...])，这会触发重新渲染，再去掉那个就行。

2026-02-12 21:00

Designer°海宇 Lv1

问题出在父组件的useState初始化和更新逻辑上。你当前的写法把formData初始化成数组却赋值了个对象，这会导致类型不一致。更简单点，直接用对象类型：

const [formData, setFormData] = useState({});

然后抽屉组件里用

2026-02-07 11:01