What to do if react null error is reported

React null error solution: 1. Open the corresponding js file; 2. Check whether the element has been rendered to the DOM; 3. Access the ref in the useEffect hook, or access the ref when the event is triggered. Can.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if I get a null error in react?

React error ref returns undefined or null

When we try to access the current property of the corresponding DOM element before it is rendered, React's ref Usually returns undefined or null. To solve this problem, you can access the ref in the useEffect hook, or access the ref when the event is triggered.

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
    </div>
  );
}

useEffect

The useRef() hook can pass an initial value as a parameter. This hook returns a mutable ref object, and the current property on the ref object is initialized to the passed parameter.

We did not pass an initial value for useRef, so its current property is set to undefined. If we pass null to the hook, we will get null if we access its current property immediately.

It should be noted that we must access the current attribute on the ref object to access the div element with the ref attribute set.

When we pass the ref attribute to an element, for example,

import {useRef, useEffect} from 'react';
export default function App() {
  const ref = useRef();
  console.log(ref.current); // ?️ undefined here
  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // ?️ element here
  }, []);
  const handleClick = () => {
    console.log(ref.current); // ?️ element here
  };
  return (
    <div>
      <div ref={ref}>
        <h2>Hello</h2>
      </div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}