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 11a9c0119a7de7705cd9417a8e6c4780 , React définit la propriété .current de l'objet ref sur le nœud DOM correspondant.

Nous utilisons le hook useEffect car nous voulons nous assurer que la référence a été définie sur l'élément et que l'élément a été rendu dans le DOM.

Si nous essayons d'accéder à la propriété actuelle sur ref directement dans le composant, nous deviendrons indéfini car ref n'a pas encore été défini et l'élément div n'a pas encore été rendu.

Event

Vous pouvez également accéder à la propriété actuelle de ref dans la fonction de gestionnaire d'événements.

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

Lorsque l'utilisateur clique sur le bouton, la référence a été définie et l'élément correspondant a été rendu dans le DOM, afin que nous puissions y accéder.

Résumé

Vous pouvez accéder à ref dans le hook useEffect, ou accéder à ref lorsque l'événement est déclenché. En d'autres termes, assurez-vous que l'élément a été rendu dans le DOM.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!