开始

react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。

解决方法

Modal里有一个属性为强制渲染

给Modal加上此属性即可。

  forceRender = {
    
    true}

上全部代码：

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

class EditDialog extends Component {
    
     
    constructor(props) {
    
    
        super(props);
        this.formRef = React.createRef(); 
        this.state = {
    
     
            visible: false,
         }
    }


    showModal = (value) => {
    
    
        this.setState({
    
    
              visible: true
            });
        if(this.formRef.current){
    
    
          this.formRef.current.setFieldsValue({
    
    
                name: value.name,
                age: value.age,
                days:value.days
          });
        }
      };
    
      handleOk = e => {
    
    
        this.setState({
    
    
          visible: false,
        });
      };
    
      handleCancel = e => {
    
    
        this.setState({
    
    
          visible: false,
        });
      };
      onFinish = values => {
    
    
        console.log('Success:', values);

      };
    
      onFinishFailed = errorInfo => {
    
    
        console.log('Failed:', errorInfo);
      };

      
    render() {
    
           
      
        return (
            <div>
                <Modal
                title="Basic Modal"
                visible={
    
    this.state.visible}
                onOk={
    
    this.handleOk}
                onCancel={
    
    this.handleCancel}
                forceRender={
    
    true}
                >
                    <Form
                      name="basic"
                      ref={
    
    this.formRef}
                      onFinish={
    
    this.onFinish}
                      onFinishFailed={
    
    this.onFinishFailed}
                    >
                      <Form.Item
                        label="姓名"
                        name="name"
                        rules={
    
    [{
    
     required: true, message: '请输入姓名!' }]}
                      >
                        <Input placeholder="请输入姓名" />
                      </Form.Item>

                      <Form.Item
                        label="天数"
                        name="days"
                        rules={
    
    [{
    
     required: true, message: '请输入天数!' }]}
                      >
                        <Input placeholder="请输入天数" />
                      </Form.Item>

                      <Form.Item
                        label="年龄"
                        name="age"
                        rules={
    
    [{
    
     required: true, message: '请输入年龄!' }]}
                      >
                        <Input placeholder="请输入年龄" />
                      </Form.Item>

                    </Form>
                </Modal>
            </div>
          );
    }
}
 
export default EditDialog;

在此记录解决问题的过程。如有不严谨的地方还请不吝赐教。