React实践报错：TypeError: Cannot read property ‘setFieldsValue‘ of null

配置

react 17.0.1
antd 4.15.0

想实现的效果

用户点击”修改个人信息“按钮时，出现表单弹窗，弹窗中默认显示当前用户信息，需要表单回显（设置值）。

报错信息

TypeError: Cannot read property ‘setFieldsValue’ of null

报错代码

showModal = () => {
    const { userInfo} = this.state
    this.setState({
      visibleInfo: true,
    });
    this.infoFormRef.current.setFieldsValue(userInfo);
  };

报错原因

对话框模块还没显示，也就是表单还没挂载就调用了setFieldsValue，所以报错

解决办法

方法一：设置一个100毫秒的延迟（已实践）

问题解决后代码

showModal = () => {
    const { userInfo} = this.state
    this.setState({
      visibleInfo: true,
    });
    // 设置100毫秒的延迟 确保from组件已经加载完毕
    setTimeout(() => {
      this.infoFormRef.current.setFieldsValue(userInfo);
    }, 100);
  };

方法二：将from表单组件化（未实践）

参考连接中大神已实践。

参考

感谢大神分析