Was tun, wenn ein React-Null-Fehler gemeldet wird?

Lösung zur Reaktion auf einen Nullfehler: 1. Öffnen Sie die entsprechende js-Datei. 2. Überprüfen Sie, ob das Element im DOM gerendert wurde. 3. Greifen Sie auf die Referenz im useEffect-Hook zu oder greifen Sie auf die Referenz zu, wenn das Ereignis ausgelöst wird.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn ein React-Null-Fehler gemeldet wird?

React-Fehlerreferenz gibt undefiniert oder null zurück

Wenn wir versuchen, auf die aktuelle Eigenschaft des entsprechenden DOM-Elements zuzugreifen, bevor es gerendert wird, gibt die Referenz von React normalerweise undefiniert oder null zurück. Um dieses Problem zu lösen, können Sie auf die Referenz im useEffect-Hook zugreifen oder auf die Referenz zugreifen, wenn das Ereignis ausgelöst wird.

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() Hook kann einen Anfangswert als Parameter übergeben. Dieser Hook gibt ein veränderliches Ref-Objekt zurück und die aktuelle Eigenschaft des Ref-Objekts wird mit dem übergebenen Parameter initialisiert.

Wir haben keinen Anfangswert für useRef übergeben, daher ist seine aktuelle Eigenschaft auf undefiniert gesetzt. Wenn wir null an den Hook übergeben, erhalten wir null, wenn wir sofort auf seine aktuelle Eigenschaft zugreifen.

Es ist zu beachten, dass wir auf das aktuelle Attribut im Ref-Objekt zugreifen müssen, um auf das div-Element mit dem Ref-Attributsatz zuzugreifen.

Wenn wir ein Ref-Attribut an ein Element übergeben, beispielsweise 11a9c0119a7de7705cd9417a8e6c4780, setzt React die .current-Eigenschaft des Ref-Objekts auf den entsprechenden DOM-Knoten.

Wir verwenden den useEffect-Hook, weil wir sicherstellen möchten, dass die Referenz für das Element festgelegt und das Element im DOM gerendert wurde.

Wenn wir versuchen, direkt in der Komponente auf die aktuelle Eigenschaft von ref zuzugreifen, werden wir undefiniert, da ref noch nicht festgelegt wurde und das div-Element noch nicht gerendert wurde.

Event

Sie können auch in der Event-Handler-Funktion auf die aktuelle Eigenschaft von ref zugreifen.

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

Wenn der Benutzer auf die Schaltfläche klickt, wurde die Referenz festgelegt und das entsprechende Element im DOM gerendert, sodass wir darauf zugreifen können.

Zusammenfassung

Sie können auf ref im useEffect-Hook zugreifen oder auf ref zugreifen, wenn das Ereignis ausgelöst wird. Mit anderen Worten: Stellen Sie sicher, dass das Element im DOM gerendert wurde.

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas tun, wenn ein React-Null-Fehler gemeldet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!