React使用useRef操作条件渲染元素报Cannot set properties of null如何解决

• 执行顺序倒置：你写的赋值代码inputRef.current.value="Some text"执行时机早于JSX的渲染挂载流程，此时input还没被挂载到DOM上，inputRef.current仍为初始值null，直接操作属性就会抛出空值错误。哪怕你确定condition为false、input最终会渲染，赋值操作的时机也早于DOM生成的时机，所以仍然会报错。
• 条件分支漏判：当condition为true时，页面渲染的是<SomeOtherComponent />，input根本不会生成，ref永远为null，此时操作必然报错。

方案1：调整赋值时机到DOM挂载完成后 #

使用useEffect监听condition的变化，等input完成挂载后再执行赋值操作，同时加上空值判断避免分支不存在的情况：

import { useEffect, useRef } from 'react'

// 组件内逻辑
const inputRef = useRef(null)

useEffect(() => {
  // 只有当input渲染存在时才操作
  if (inputRef.current) {
    inputRef.current.value = "Some text"
  }
}, [condition]) // 依赖项加入condition，每次条件变化触发检查

// 渲染逻辑保持不变
return (
  <>
    {condition ? <SomeOtherComponent /> : <input type="text" ref={inputRef} />}
  </>
)

方案2：直接用原生属性替代ref操作 #

如果只是需要给input设置默认值/受控值，完全不需要用ref操作，符合React声明式写法的更优方案：

• 非受控组件场景：直接加defaultValue属性

  {condition ? <SomeOtherComponent /> : <input type="text" ref={inputRef} defaultValue="Some text" />}
  

• 受控组件场景：绑定state管理值

  const [inputVal, setInputVal] = useState("Some text")
  // 渲染时
  {condition ? <SomeOtherComponent /> : <input type="text" value={inputVal} onChange={e => setInputVal(e.target.value)} />}
  

临时兼容方案：添加空值保护 #

如果确实需要在其他时机操作ref，给所有ref操作加上可选链判空，避免程序崩溃：

// 可选链遇到null时会短路不会抛出错误
inputRef.current?.value = "Some text"

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