State hochziehen und Daten teilen

Platziere jeden State-Teil im nächsten gemeinsamen Vorfahren, um Daten zwischen mehreren Komponenten zu teilen, ohne sie zu duplizieren.

7 Min. · 3 Fragen

Zwei Geschwisterkomponenten müssen dieselben Daten anzeigen: zum Beispiel ein Suchfeld und die Liste, die es filtert. Lokaler State in jeder von ihnen kann nicht funktionieren, weil sie sich gegenseitig nicht sehen. Die Lösung ist, den State hochzuziehen in ihren nächsten gemeinsamen Vorfahren: Die Elternkomponente besitzt die Daten und reicht sie über Props wieder nach unten.

import { useState } from "react";

function ProductPage({ products }) {
  const [query, setQuery] = useState("");

  return (
    <>
      <SearchBar query={query} onChange={setQuery} />
      <ProductList products={products} query={query} />
    </>
  );
}

Die Kinder werden dann zu kontrollierten Komponenten: Sie erhalten den Wert schreibgeschützt und rufen, um ihn zu ändern, die vom Elternteil bereitgestellte Callback-Funktion auf. Daten fließen über Props nach unten, Änderungsanfragen fließen über Funktionen nach oben. Dieser Einbahnfluss macht das Verhalten der Anwendung leicht nachvollziehbar.

function SearchBar({ query, onChange }) {
  return (
    <input
      value={query}
      onChange={(e) => onChange(e.target.value)}
      placeholder="Search for a product"
    />
  );
}

function ProductList({ products, query }) {
  const visible = products.filter((p) =>
    p.name.toLowerCase().includes(query.toLowerCase())
  );
  return (
    <ul>
      {visible.map((p) => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Jeder Datenteil muss eine einzige Quelle der Wahrheit haben. Wenn zwei Komponenten jeweils ihre eigene Kopie desselben States speichern, driften die Kopien irgendwann auseinander: Eine wird aktualisiert, die andere nicht, und die Oberfläche wird inkonsistent. Den State hochzuziehen beseitigt dieses Risiko. Wenn die Daten viele Ebenen durchqueren müssen, erleichtern Komposition (nächste Lektion) und dann Context das Durchreichen der Props.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Wo solltest du State platzieren, den zwei Geschwisterkomponenten brauchen?
   • Im ersten der beiden Geschwister, das ihn an das andere weitergibt
   • In ihrem nächsten gemeinsamen Vorfahren
   • In einer globalen Variable, die außerhalb von React deklariert ist
   • In jedem der beiden Geschwister, von Hand synchronisiert
2. Wie kann eine Kindkomponente State ändern, der ihrem Elternteil gehört?
   • Indem sie die erhaltene Prop direkt ändert
   • Indem sie eine vom Elternteil als Prop übergebene Callback-Funktion aufruft
   • Indem sie useState mit demselben Anfangswert wie das Elternteil verwendet
3. Warum solltest du vermeiden, dieselben Daten in zwei verschiedenen State-Teilen zu speichern?
   • Es verbraucht zu viel Speicher
   • React verbietet zwei useState-Aufrufe mit demselben Anfangswert
   • Die beiden Kopien geraten irgendwann aus dem Takt und die Oberfläche wird inkonsistent