Ant Design类组件中调用setFieldsValue报错：无法读取null的属性

这个报错本质是你的formRef.current还没指向有效的Form实例，大概率是ref关联或者调用时机的问题，下面给你一步步排查和解决的方案：

1. 确认 ref 正确初始化并关联到 Form 组件 #

首先要保证你创建的ref确实绑定到了AntD的Form组件上，不同组件类型的写法略有区别：

函数组件（推荐用useRef） #

import { useRef, useEffect } from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = () => {
  // 初始化ref
  const formRef = useRef(null);

  const fillForm = () => {
    // 使用可选链避免null报错
    formRef.current?.setFieldsValue({
      username: 'Nguyen Tu',
      email: 'example@test.com'
    });
  };

  return (
    <div>
      <Form ref={formRef}>
        <Form.Item name="username" label="用户名">
          <Input />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input />
        </Form.Item>
      </Form>
      <Button onClick={fillForm}>填充表单</Button>
    </div>
  );
};

export default MyForm;

类组件（用createRef） #

import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';

class MyForm extends Component {
  constructor(props) {
    super(props);
    // 初始化ref
    this.formRef = React.createRef();
  }

  fillForm = () => {
    this.formRef.current?.setFieldsValue({
      username: 'Nguyen Tu',
      email: 'example@test.com'
    });
  };

  render() {
    return (
      <div>
        <Form ref={this.formRef}>
          <Form.Item name="username" label="用户名">
            <Input />
          </Form.Item>
          <Form.Item name="email" label="邮箱">
            <Input />
          </Form.Item>
        </Form>
        <Button onClick={this.fillForm}>填充表单</Button>
      </div>
    );
  }
}

export default MyForm;

2. 确保在组件挂载后再调用 setFieldsValue #

如果是页面加载时自动填充表单，一定要在组件挂载完成后再执行赋值操作，否则ref还没被赋值：

函数组件用useEffect #

useEffect(() => {
  // 组件挂载后自动填充
  formRef.current?.setFieldsValue({
    username: 'Nguyen Tu'
  });
}, []); // 空依赖数组确保只执行一次

类组件用componentDidMount #

componentDidMount() {
  this.formRef.current?.setFieldsValue({
    username: 'Nguyen Tu'
  });
}

3. 检查是否存在条件渲染导致 Form 未挂载 #

如果你的Form组件是通过条件渲染展示的（比如{isShow && <Form ref={formRef} />}），那么当isShow为false时，formRef.current就是null。这种情况要：

• 要么确保调用setFieldsValue时，Form已经处于渲染状态
• 要么在调用时先判断ref是否存在（用可选链?.或者if判断）

const fillForm = () => {
  if (formRef.current) {
    formRef.current.setFieldsValue({ ... });
  }
};

4. 类组件注意this的绑定问题 #

如果是在类组件的事件处理函数中调用，要确保this指向正确。推荐用箭头函数定义方法（像上面示例那样），或者在constructor中绑定：

constructor(props) {
  super(props);
  this.formRef = React.createRef();
  // 绑定this
  this.fillForm = this.fillForm.bind(this);
}

fillForm() {
  this.formRef.current?.setFieldsValue({ ... });
}

总结一下，最常见的问题就是ref没正确绑定，或者在组件挂载前就调用了setFieldsValue。按照上面的步骤排查，应该就能解决你的问题啦！

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