React ref为空问题

Question

看代码：

import { useState, createRef } from 'react';
const comp = ()=>{
    const [visible, setVisible] = useState(false);
    const formRef = createRef<any>()
    const columns = [
        {title:'名称',dataIndex:'name'},
        {title:'actions',render:(text,record)=>{
            return <Button onClick={updateForm.bind(null,record.id)}>
                    修改
                </Button>
        }}
    ]
    const updateForm = (id)=>{
        setVisible(true);
        console.log(formRef.current); // 是null,为什么？
    };
    const modalOk = async () => {
        console.log(formRef.current); // 它却有值,为什么？
         setVisible(false);
      };
    return ( 
        <>
          <Table
            size="small"
            rowKey="id"
            dataSource={dataSource}
            columns={columns}
          />
          <Modal
            title="添加数据"
            visible={visible}
            onOk={modalOk}
            destroyOnClose
            onCancel={() => {
              setVisible(false);
            }}
          >
        </>
    )
}

感谢各位朋友能看完代码，本人初学react，如果有除了bug之外不合适的地方也可以点出来。我会虚心接受的。

Answer 1

我没有仔细看，但是之前遇到个差不多的。就是你的ref绑定的是modal吗，你第一次渲染的时候modal还没有出来，所以没有那个节点，ref为空，当你点击之后modal弹出来了，ref就不为null了，我也是初学者说一下自己的看法

Answer 2

ref 仅在节点被加载时才会被赋值，请参考 React 官方文档：https://reactjs.org/docs/refs...
另外看你是用的antd，在 antd 的官方文档上也有提到这个问题：
https://ant.design/components/form-cn/#为什么第一次调用-ref-的-From-为空？