React结合Antd开发时全屏抽屉失焦后表单数据丢失如何解决

你代码的核心问题出在CreateVoucher组件的渲染逻辑上：

• 你直接把form.setFieldsValue的逻辑写在了组件的根渲染层级，没有放到生命周期钩子中，组件每一次重渲染都会执行这段逻辑覆盖表单值
  当你打开/关闭DetailsModal时，newModal状态变化会触发CreateVoucher重渲染，如果此时initalValue是空对象，就会把表单已填写的字段覆盖为undefined，和你日志里看到的现象完全吻合。
• 额外的拼写错误：你接收的prop是initalValue，少了一个字母i，正确拼写应为initialValue，如果父组件传递的是标准拼写的prop，你这里拿到的永远是默认空对象，也会导致表单值被反复覆盖。

1. 把根层级的表单赋值逻辑移到useEffect中，仅当initalValue变化时才执行赋值操作，修改后的代码如下：

// 删掉原来写在根层级的if(initalValue) { form.setFieldsValue(...) } 逻辑
// 合并到已有的useEffect中
useEffect(() => {
  if (!initalValue) return
  const { _id, name, header, voucherData } = initalValue
  // 仅initalValue变化时才更新表单值
  form.setFieldsValue({
    _id,
    name,
    header,
    voucherData,
  })
  if (voucherData?.length) {
    setVoucherData(voucherData)
  } else {
    setVoucherData([])
  }
}, [initalValue, form])

2. 修正拼写错误，将组件接收的propinitalValue统一改为initialValue，避免传参异常。
3. 确认你封装的FullscreenDialog组件没有开启destroyOnClose属性，若默认开启手动设置为destroyOnClose={false}即可。

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