What to do if react null error is reported-Front-end Q&A-php.cn

What to do if react null error is reported

藏色散人

Release： 2023-01-19 14:43:34

Original

1411 people have browsed it

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.

What to do if react null error is reported

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 &#39;react&#39;;
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>
  );
}

Copy after login

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,

, React sets the .current property of the ref object to the corresponding DOM node.

We use the useEffect hook because we want to ensure that the ref has been set on the element and that the element has been rendered to the DOM.

If we try to directly access the current property on ref in the component, we will get undefined because ref has not been set yet and the div element has not been rendered.

Event

You can also access the current property of ref in the event handler function.

import {useRef, useEffect} from &#39;react&#39;;
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>
  );
}

Copy after login

When the user clicks the button, the ref has been set and the corresponding element has been rendered into the DOM, so we can access it.

Summary

You can access ref in the useEffect hook, or access ref when the event is triggered. In other words, make sure the element has been rendered to the DOM.

Recommended learning: "react video tutorial"

The above is the detailed content of What to do if react null error is reported. For more information, please follow other related articles on the PHP Chinese website!