Warum wird mein React-useEffect-Hook auch mit einem leeren Abhängigkeitsarray mehrmals ausgeführt?

Die Frage
Bei der Arbeit an einem React-Projekt bin ich auf ein Problem mit dem useEffect-Hook gestoßen. Mein Ziel war es, Daten nur einmal von einer API abzurufen, wenn die Komponente bereitgestellt wird. Der useEffect wurde jedoch mehrmals ausgeführt, obwohl ich ein leeres Abhängigkeitsarray bereitgestellt habe.

Hier ist der Codeausschnitt:

import React, { useEffect, useState } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    console.log("Fetching data...");
    axios.get("https://jsonplaceholder.typicode.com/posts")
      .then(response => setData(response.data))
      .catch(error => console.error(error));
  }, []);
  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

Trotz des leeren Abhängigkeitsarrays ([]) wurde useEffect mehrmals ausgeführt. Ich habe versucht, den Entwicklungsserver neu zu starten, aber das Problem blieb bestehen. Nach einiger Recherche und Fehlerbehebung habe ich die Grundursache identifiziert und behoben.
Die Antwort

Warum das passiert

Strikter Modus in der Entwicklung:

Wenn Ihre App im Entwicklungsmodus von React mit aktiviertem StrictMode ausgeführt wird, mountet und unmountet React Komponenten absichtlich mehrmals. Dies ist ein reines Entwicklungsverhalten, das dazu dient, Nebenwirkungen zu erkennen, die Probleme verursachen können.

Erneutes Rendern oder Hot Module Replacement (HMR):

Während der Entwicklung können Änderungen im Code einen Hot Module Replacement auslösen, was dazu führt, dass die Komponente erneut gerendert und useEffect erneut ausgeführt wird.

So beheben oder behandeln Sie dieses Verhalten

Strikten Modus identifizieren:

Wenn Sie StrictMode verwenden, beachten Sie, dass dieses Verhalten nur in der Entwicklung auftritt und keine Auswirkungen auf den Produktions-Build hat. Sie können es vorübergehend deaktivieren, indem Sie
entfernen

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));  

Es ist jedoch besser, es aktiviert zu lassen und Ihren Code anzupassen, um potenzielle Nebenwirkungen reibungslos zu bewältigen.

Doppelte API-Aufrufe verhindern:

Verwenden Sie ein Flag, um sicherzustellen, dass der API-Aufruf nur einmal während des Lebenszyklus der Komponente erfolgt, sogar

import React, { useEffect, useState, useRef } from "react";
import axios from "axios";

const MyComponent = () => {
  const [data, setData] = useState([]);
  const isFetched = useRef(false);

  useEffect(() => {
    if (isFetched.current) return;

    console.log("Fetching data...");
    axios.get("https://api.example.com/data")
      .then(response => setData(response.data))
      .catch(error => console.error(error));

    isFetched.current = true;
  }, []);

  return (
    <div>
      <h1>Data</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default MyComponent;

Durch die Verwendung einer useRef wird sichergestellt, dass der API-Aufruf nur einmal erfolgt, unabhängig von den zusätzlichen Renderings, die durch StrictMode verursacht werden.

Wichtige Erkenntnisse
. Der strikte Modus von React in der Entwicklung ist beabsichtigt und kann bedenkenlos aktiviert bleiben.
. Bei Produktionsversionen tritt dieses Problem nicht auf. . Verwenden Sie bei Bedarf useRef oder andere Techniken, um Nebenwirkungen zu bewältigen.
Verwenden Sie bei Bedarf useRef oder andere Techniken, um Nebenwirkungen zu bewältigen.
Bei Produktionsversionen tritt dieses Problem nicht auf.
Verwenden Sie bei Bedarf useRef oder andere Techniken, um Nebenwirkungen zu bewältigen.

Das obige ist der detaillierte Inhalt vonWarum wird mein React-useEffect-Hook auch mit einem leeren Abhängigkeitsarray mehrmals ausgeführt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!