React+Ant Design v4.1.0中formRef为null，无法使用setFieldsValue赋值

我来帮你分析问题所在，以及给出可行的修复方案：

为什么this.formRef.current是null？ #

你遇到的Cannot read property 'setFieldsValue' of null错误，主要有两个核心原因：

1. Ant Design v4的Form ref不是你想的那样：直接给<Form>组件添加ref，获取到的其实是Form组件的DOM节点，而非Ant Design封装的Form实例（也就是拥有setFieldsValue等方法的对象）。就算ref挂载成功，你也无法通过它调用表单的核心方法。
2. 时机不匹配：如果componentDidUpdate在Form组件完成挂载前就执行（比如props更新触发了组件重渲染，但此时Form的ref还没被赋值），就会出现formRef.current为null的情况。

更关键的是，在Ant Design v4的类组件中，正确获取Form实例的方式不是手动创建ref，而是通过Form.create()高阶组件来注入form对象。

如何正确使用setFieldsValue更新表单字段？ #

我们可以通过以下步骤修复你的代码：

1. 用Form.create()包裹组件，注入Form实例 #

Form.create()会将Form实例作为form属性注入到你的组件props中，这样你就能直接通过this.props.form调用所有表单方法，无需手动管理ref。

2. 在合适的时机调用setFieldsValue #

• 在componentDidMount中初始化表单值，确保组件第一次渲染时就能显示props中的数据。
• 在componentDidUpdate中添加条件判断，只有当customerData发生变化时才更新表单，避免因setFieldsValue触发的重渲染导致无限循环。
• 处理customerData为空的情况，防止访问数组元素时出错。另外注意：你的customerData是数组，但表单用的是单个Input，所以应该取数组的第一个元素（如果业务需要多选，应该改用对应的组件，比如Checkbox.Group）。

修改后的完整代码 #

import { Form, Input } from 'antd';

class CustomForm extends React.Component {
  componentDidMount() {
    // 组件挂载时初始化表单值
    this.updateFormValues(this.props.customerData);
  }

  componentDidUpdate(prevProps) {
    // 仅当customerData变化时更新表单，避免无限循环
    if (prevProps.customerData !== this.props.customerData) {
      this.updateFormValues(this.props.customerData);
    }
  }

  // 封装表单更新逻辑，复用代码
  updateFormValues = (customerData) => {
    if (!customerData || customerData.length === 0) return;
    
    // 取数组第一个元素适配单个Input字段
    const customer = customerData[0];
    this.props.form.setFieldsValue({
      email: customer.email,
      mobileNumber: customer.mobile_number,
    });
  };

  onFinish = (values) => {
    // 你的提交逻辑，比如发送ID到reducer
    console.log('表单提交值:', values);
  };

  render() {
    const { form } = this.props;
    return (
      <Form form={form} onFinish={this.onFinish} name="customForm">
        <Form.Item label="Email" name="email">
          <Input />
        </Form.Item>
        <Form.Item label="Mobile Number" name="mobileNumber">
          <Input />
        </Form.Item>
      </Form>
    );
  }
}

// 使用Form.create()包裹组件，注入form实例
export default Form.create()(CustomForm);

额外注意事项 #

• 如果你坚持不用Form.create()，也可以通过Form.useForm()创建实例，但useForm是React Hooks，类组件无法直接使用，所以更推荐用Form.create()的方案。
• 确保customerData的字段名和表单Item的name属性完全匹配（比如代码中新增的mobileNumber表单Item，要对应数据里的mobile_number字段）。

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