react runtime_error ai_generated true

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

ID: react/usecontext-null-focus

Also available as: JSON · Markdown · 中文
88%Fix Rate
84%Confidence
1Evidence
2023-05-12First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —

Root Cause

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

中文

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

Official Documentation

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

Workarounds

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

中文步骤

  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]);`

Dead Ends

Common approaches that don't work:

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

    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% fail

    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% fail

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