Geschwisterkomponente bei Mutation aktualisieren?

Question

Nehmen wir an, dass ich die folgende Struktur haben:

<div> 
    <Form /> 
    <List /> 
</div> 

Aktuelle Einstellung: Abfrage ist in <List /> Komponente und Mutation in <Form /> Komponente. Weil <Form /> keine Abfrage hat, kann getFatQuery nicht tun, es ist Magie zu vergleichen, und es gibt nur clientMutationId zurück, was letztlich bedeutet, dass Listendaten nicht ohne Seitenaktualisierung aktualisiert werden.

Wie kann ich das funktionieren lassen? Ich brauche eine separate Formularkomponente, weil ich Mutationen im Modal machen möchte. Sollte ich die Mutation selbst in <List /> machen und Daten von <Form /> zu <List /> "transportieren"?

Ich habe viele ähnliche Situationen, in denen ich Daten (Formularkomponente) in separate Komponente einfügen möchte, was ist die Strategie für diese Situationen?

Answer 1

Sie versuchen, die Statusverwaltung mit React durchzuführen, was, wie Sie bemerken, verwirrend sein kann, da es keine einfache Möglichkeit gibt, Daten in der Hierarchie "zu übergeben". Eine allgemeine Lösung besteht darin, dass eine übergeordnete Komponente die Daten enthält und Ihre Komponenten Form und List auf diese Daten reagieren und sie nur durch Rückrufe ändern, die von dieser übergeordneten Komponente übergeben werden.

Eine weitere häufige Lösung besteht darin, Redux zu Ihrer Anwendung hinzuzufügen, um die Statusdaten auf Anwendungsebene zu verarbeiten. Mit dieser Option können Sie alle Daten in einem einzigen Objekt mit der Bezeichnung store aufbewahren, wodurch es für jede Komponente einfach ist, Änderungen zu abonnieren, sodass keine übergeordnete Komponente mehr Daten übertragen muss.