react runtime_error ai_generated true

类型错误：无法读取 null 的属性（读取 'focus'）。此错误位于：MyComponent (at App.js:15)

TypeError: Cannot read properties of null (reading 'focus'). This error is located at: in MyComponent (at App.js:15)

ID: react/usecontext-null-focus

其他格式: JSON · Markdown 中文 · English
88%修复率
84%置信度
1证据数
2023-05-12首次发现

版本兼容性

版本状态引入弃用备注
[email protected] active — — —
[email protected] active — — —

根因分析

ref 附加到条件渲染的组件或元素上，当元素未挂载时（ref.current 为 null），代码尝试调用 ref.current.focus()。

English

A ref is attached to a component or element that is conditionally rendered, and code tries to call ref.current.focus() when the element is not mounted (ref.current is null).

generic

官方文档

https://reactjs.org/docs/refs-and-the-dom.html

解决方案

  1. Check if ref.current is not null before calling focus: `if (ref.current) { ref.current.focus(); }`
  2. Use useEffect with a dependency on the condition that controls rendering: `useEffect(() => { if (isVisible && ref.current) { ref.current.focus(); } }, [isVisible]);`

无效尝试

常见但无效的做法:

  1. Using optional chaining (ref.current?.focus()) without understanding why ref is null 50% 失败

    Silently fails when the element is not mounted; the focus action never happens, which may be a UX issue.

  2. Moving the focus call to useEffect with no dependency array 60% 失败

    May run before the element is rendered if the component conditionally renders the element later.

  3. Using a callback ref and trying to focus immediately 45% 失败

    Callback refs are called during render, but the DOM may not be fully attached yet.