Behebung von UI-Update-Problemen mit benutzerdefinierten Hooks in React

Identifizieren eines UI-Update-Problems

Wenn Sie mit der Statusverwaltung in React gearbeitet haben, sind Sie wahrscheinlich auf dieses frustrierende Szenario gestoßen: Ihr Status wird korrekt aktualisiert (wie in den React DevTools oder Konsolenprotokollen zu sehen), aber Ihre Benutzeroberfläche spiegelt diese Änderungen nicht wider.

Ich bin kürzlich auf diese Herausforderung gestoßen, als ich mit einem benutzerdefinierten React-Hook gearbeitet habe, und ich möchte Ihnen mitteilen, wie ich sie gelöst habe.

Der folgende Codeausschnitt zeigt die Projektstruktur, mit der ich gearbeitet habe.

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

// LocationFilter.jsx

import useCustomHook from "./useCustomHook";

function LocationFilter() {
  const { location, handleLocationChange } = useCustomHook();

  const handleFilterByState = () => {
    handleLocationChange("state");
  };

  const handleFilterByCountry = () => {
    handleLocationChange("country");
  };

  return (
    <div>
      <button onClick={handleFilterByState}>View State Data</button>
      <button onClick={handleFilterByCountry}>View Country Data</button>
    </div>
  );
}

export default LocationFilter;

Ich habe einen benutzerdefinierten Hook erstellt, um Statusänderungen zu verwalten, wenn Benutzer auf die Schaltfläche klicken, um entweder landesspezifische oder landesweite Daten anzuzeigen.

In App.jsx, das als übergeordnete Komponente dient, wird der benutzerdefinierte Hook aufgerufen, um auf den Datenstatus zuzugreifen und ihn als Requisiten an die Tabellenkomponente (untergeordnete Komponente) weiterzugeben.

In der LocationFilter-Komponente habe ich zunächst den benutzerdefinierten Hook direkt instanziiert, um auf den Standort und den HandleLocationChange-Status zuzugreifen, der dazu gedacht war, die in der Tabelle angezeigten Daten gemäß einem „Status“- oder „Standort“-Filter zu verwalten.“

Wenn ich jedoch auf die Schaltfläche „Staatsdaten anzeigen“ oder „Länderdaten anzeigen“ klicke, ändert sich nichts an der Benutzeroberfläche.

Ich habe den Standortstatus innerhalb der LocationFilter-Komponente mithilfe der React Developer Tools überprüft und festgestellt, dass der Standort- und Datenstatus wie erwartet mit dem richtigen Wert aktualisiert wurde. Allerdings spiegelte die Benutzeroberfläche die Änderungen am Datenstatus nicht wider, als ich auf die Schaltfläche klickte.

Was hat meine Probleme mit der React State-Verwaltung verursacht?

? Mein anfänglicher Ansatz schien logisch: Ich ging davon aus, dass der Aufruf des benutzerdefinierten Hooks in jeder Komponente es jeder Komponente ermöglichen würde, auf dieselbe Statusinstanz zuzugreifen und diese zu teilen.

Flussdiagramm: Vor dem Anheben des Staates

• Unabhängige Hook-Instanz: Durch den Aufruf von useCustomHook in LocationFilter wurde eine separate Instanz des Hook-Status für diese Komponente erstellt. Jede Komponente behält ihren eigenen Status bei, sodass Statusaktualisierungen in der LocationFilter-Komponente keinen Einfluss auf den Status in der App-Komponente haben.
• Problem mit der Statussynchronisierung: Durch Klicken auf die Schaltfläche wird der Status der App-Komponente nicht aktualisiert, was zu einer Nichtübereinstimmung zwischen der übergeordneten und der untergeordneten Komponente führt. Da der Status des übergeordneten Elements unverändert bleibt, spiegelt die Benutzeroberfläche keine Aktualisierungen des untergeordneten Elements wider, wodurch ein erneutes Rendern in beiden Komponenten verhindert wird.

Die Lösung: Den Staat anheben

React synchronisiert den Status zwischen Komponenten nicht, es sei denn, Sie geben ihn über Requisiten oder Kontext weiter. Um dieses Problem zu beheben, habe ich den State-Hook-Aufruf aus der LocationFilter-Komponente entfernt, den benötigten Status in der App-Komponente abgerufen und ihn als Requisiten an die LocationFilter-Komponente weitergegeben. Dadurch wird sichergestellt, dass beide Komponenten den gleichen Status haben, Änderungen in der App vorgenommen werden und die Daten beider Komponenten synchronisiert werden.

Flussdiagramm: Nach dem Anheben des Zustands

Hier ist der aktualisierte Code für LocationFilter und App

// useCustomHook.jsx
function useCustomHook() {
  const [data, setData] = useState(stateData);
  const [location, setLocation] = useState("state");

  const handleLocationChange = (selectedLocation) => {
    if (selectedLocation === "state") {
      setLocation("state");
      setData(stateData);
    } else if (selectedLocation === "country") {
      setLocation("country");
      setData(countryData);
    }
  };
  return { data, location, handleLocationChange };
}

export default useCustomHook;

// App.jsx

import useCustomHook from "./useCustomHook";
import LocationFilter from "./LocationFilter";
import Table from "./Table";
import "./App.css";

export function App() {
  const { data } = useCustomHook();

  return (
    <div className="App">
      <LocationFilter />
      <Table data={data} />
    </div>
  );
}

export default App;

Abschluss

Diese Erfahrung hat mein Verständnis für benutzerdefinierte Hooks, die Bedeutung der Übertragung des Status auf eine gemeinsame übergeordnete Komponente und Best Practices für die Statusverwaltung in React gestärkt, um synchronisierte, konsistente UI-Updates sicherzustellen. Mit benutzerdefinierten Hooks können Sie zwar die Statuslogik komponentenübergreifend teilen, nicht jedoch den Status.

Ausführlichere Informationen finden Sie in der React-Dokumentation zu Custom Hooks und Lifting State Up.

Das obige ist der detaillierte Inhalt vonBehebung von UI-Update-Problemen mit benutzerdefinierten Hooks in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!