React组件加载时useEffect触发后Ref为undefined的问题原因

为啥直接用useEffect会报错？ #

问题核心是第三方组件（Flowbite的Modal/TextInput）的异步渲染逻辑和React的生命周期时机没对上：

• React里useEffect(() => {}, [])是在你的Register组件首次挂载完成后立刻执行，但这个“挂载完成”只代表Register本身的虚拟DOM渲染好了，不代表里面嵌套的Modal组件已经把TextInput渲染到真实DOM里。
• Flowbite的Modal哪怕你设了show="true"，它内部可能有过渡动画、或者是用状态延迟挂载真实DOM的逻辑，导致TextInput的DOM节点在useEffect执行的时候还没生成，这时候usernameInputRef.current就是null，调用focus()自然就报错了。
• 你用setTimeout能成，纯粹是因为等100ms后，Modal的渲染/动画走完了，TextInput的DOM节点终于出来了，ref能拿到真实元素，focus就生效了。但这种方式全靠碰时间，很不可靠——比如旧设备可能需要更长时间，到时候又会报错。

靠谱的解决办法 #

别用setTimeout了，试试这几种更规范的方式：

1. 用Modal的打开完成回调

Flowbite的Modal一般会提供onOpened这类回调（可查看官方文档确认具体命名），这个回调是在Modal完全打开、内部元素都渲染好之后才触发的，在这儿调用focus准没错：

// 修改Modal的写法
<Modal show="true" onOpened={() => usernameInputRef.current?.focus()}>
  {/* 里面的表单内容保持不变 */}
</Modal>

2. 监听Modal的显示状态（如果是动态控制的）

要是你之后用state来控制Modal的显示（比如const [isModalOpen, setIsModalOpen] = useState(true)），就把这个状态加到useEffect的依赖里，等状态变成true时再执行focus，搭配requestAnimationFrame确保DOM更新完成：

import { useState } from 'react';

// 新增状态控制Modal显示
const [isModalOpen, setIsModalOpen] = useState(true);

useEffect(() => {
  if (isModalOpen) {
    // 等浏览器下一次重绘时执行，确保DOM已经更新完毕
    requestAnimationFrame(() => {
      usernameInputRef.current?.focus();
    });
  }
}, [isModalOpen]);

// Modal绑定状态
<Modal show={isModalOpen}>
  {/* 内容保持不变 */}
</Modal>

3. 直接加autoFocus属性

最省事的办法：如果只是组件加载时需要自动聚焦，给TextInput加个autoFocus属性就行：

<TextInput
  id="username"
  // 其他属性保持不变
  autoFocus
  ref={usernameInputRef}
/>

不过要注意，autoFocus一般只在TextInput首次渲染时生效，要是之后Modal是关闭再打开的，可能不会重新聚焦，这时候还是用前两种方法更稳妥。

总结 #

本质就是React组件挂载完成的时间，和第三方UI组件内部渲染真实DOM的时间没同步上，导致ref拿不到元素。别依赖setTimeout这种碰运气的方式，用组件自身的回调或者React的DOM更新机制才是正道。

内容的提问来源于stack exchange，提问作者Richard Jones