Que faire si une erreur de réaction nulle est signalée

Solution pour réagir à l'erreur null : 1. Ouvrez le fichier js correspondant ; 2. Vérifiez si l'élément a été rendu dans le DOM ; 3. Accédez à la référence dans le hook useEffect, ou accédez à la référence lorsque l'événement est déclenché.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Que faire si une erreur de réaction nulle est signalée ?

La référence d'erreur React renvoie undéfini ou null

Lorsque nous essayons d'accéder à la propriété actuelle de son élément DOM correspondant avant qu'il ne soit rendu, la référence de React renvoie généralement undéfini ou null. Pour résoudre ce problème, vous pouvez accéder à la référence dans le hook useEffect, ou accéder à la référence lorsque l'événement est déclenché. Le hook

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

useRef() peut transmettre une valeur initiale en tant que paramètre. Ce hook renvoie un objet ref mutable et la propriété actuelle sur l'objet ref est initialisée avec le paramètre passé.

Nous n'avons pas transmis de valeur initiale pour useRef, sa propriété actuelle est donc définie sur undefined. Si nous passons null au hook, nous obtiendrons null si nous accédons immédiatement à sa propriété actuelle.

Il convient de noter que nous devons accéder à l'attribut actuel sur l'objet ref pour accéder à l'élément div avec l'attribut ref défini.

Lorsque nous transmettons un attribut ref à un élément, par exemple

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>
  );
}