React使用useRef时useEffect内element.current始终为null如何解决

• 绑定ref的<div>属于条件渲染节点，仅当loading为false时才会挂载到DOM树，此时element.current才会被赋值为对应DOM实例，节点未挂载时current天然为null
• 现有useEffect的依赖项为data和element：element是useRef返回的固定引用对象，本身永远不会触发更新，因此useEffect仅会在data变更时执行。如果执行时loading还未完成、节点未挂载，就会拿到null的current值，后续loading变为false、节点完成挂载时，useEffect也不会重新触发。

方案1：将loading加入useEffect依赖（最适配现有逻辑） #

loading变为false时节点刚好完成挂载，此时触发useEffect即可拿到有效的DOM实例，同时补充清理逻辑避免内存泄漏：

useEffect(() => {
    if (element.current === null) return;
    // 初始化编辑器
    const editorInstance = new JSONEditor(element.current, someOptions);
    editor.current = editorInstance;
    // 清理逻辑：依赖变更/组件卸载时销毁编辑器
    return () => {
        editorInstance?.destroy?.();
        editor.current = null;
    };
// 把loading加入依赖数组
}, [data, loading]);

方案2：用样式控制显隐代替条件渲染 #

如果不需要销毁节点，可把条件渲染改为CSS显隐控制，节点从始至终都挂载在DOM中，element.current永远有值：

return (
<div>
    {loading && <CircularIndeterminateLoading />}
    {/* 用display控制显隐，保留节点挂载 */}
    <div ref={element} style={{ display: loading ? 'none' : 'block' }}></div>
</div>
)

该方案改动最小，适合编辑器初始化开销较低的场景。

方案3：使用回调Ref精准触发初始化 #

用回调Ref代替普通useRef，节点挂载时会主动触发回调逻辑，无需额外监听loading状态：

// 定义回调Ref
const handleElementRef = (node: HTMLDivElement | null) => {
    element.current = node;
    // 节点挂载且数据已加载时，初始化编辑器
    if (node && data) {
        editor.current = new JSONEditor(node, someOptions);
    }
}

// 渲染部分绑定回调Ref
return (
<div>
    {loading && <CircularIndeterminateLoading />}
    {!loading && <div ref={handleElementRef}></div>}
</div>
)

该方案逻辑最精准，不会出现依赖漏加导致的触发时机问题。

你代码中执行fetch的useEffect没有填写依赖数组，会在每次组件渲染时重复执行fetch，建议补充空依赖数组[]保证仅组件挂载时执行一次，或按需添加对应依赖。

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