调用setState触发组件全量重渲染导致Ant Design Form填写数据丢失如何解决

问题根因 #

form.setFieldsValue 直接写在了组件顶层执行逻辑中，只要组件触发重渲染（调用setColorPalletVisible更新组件内部state会触发重绘），且record === 'add'条件成立，就会强制把表单字段重置为空，导致用户已输入内容丢失。另外你的代码还存在两个隐性问题：

• 没有通过Form.useForm()声明获取Form实例，直接调用form.setFieldsValue会报错
• Form标签提前闭合，颜色对应的Form.Item没有被包裹在Form内部，该字段无法被Form实例管理

修复方案 #

• 把表单初始值设置逻辑包裹在useEffect中，仅在record值发生变化时才执行初始值赋值，普通state更新触发的重渲染不会触发重置
• 补全Form实例声明，修正JSX的结构错误

修复后完整代码 #

import React, { useEffect } from 'react';
import { Form, Input, Avatar } from 'antd';
import { FormatPainterFilled } from '@ant-design/icons';

export default function EditTableCell({ record }) {
  // 获取Form实例
  const [form] = Form.useForm();
  const [colorSwatch, setColorSwatch] = React.useState(record.color);
  const [colorPalletVisible, setColorPalletVisible] = React.useState(false);

  // 仅在record变化时才设置初始值，不会每次渲染都执行
  useEffect(() => {
    if (record === 'add') {
      form.setFieldsValue({
        description: '',
        notes: '',
        color: record.color
      });
    }
    // 编辑场景同步record的初始值
    else {
      form.setFieldsValue(record);
    }
  }, [record, form]);

  return (
    <Form form={form}>
      <Form.Item
        label="description"
        name="description"
      >
        <Input />
      </Form.Item>
      {/* color表单项放到Form内部统一管理 */}
      <Form.Item name="color" noStyle>
        <Avatar
          size={32}
          icon={<FormatPainterFilled />}
          style={{ backgroundColor: colorSwatch }}
          onClick={() => setColorPalletVisible(!colorPalletVisible)}
        />
      </Form.Item>
    </Form>
  );
}

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