Erstellen Sie eine React-Suchoberfläche mit klarer Zustandsverwaltung

Ein Such-Backend kann zwar die richtigen Dokumente abrufen, doch dennoch eine verwirrende Benutzererfahrung schaffen. Eine langsame Antwort auf eine frühere Anfrage kann ein neueres Ergebnis überschreiben. Die Anzahl der Filter kann hinter der Liste zurückbleiben. Ein Quellenbereich kann Zitate aus der vorherigen Antwort anzeigen.

Diese Probleme beginnen oft mit unklarer Zuständigkeitsverteilung: Mehrere Zustandsvariablen repräsentieren dieselbe Tatsache, oder Auswirkungen deuten auf ein Ereignis hin, das die Benutzeroberfläche bereits behandelt hat.

Für eine React-basierte Wissensanwendung sollte man zunächst entscheiden, was jeder Wert bedeutet und welche Operation ihn ändern darf.

Eingabe von der eingereichten Frage trennen

Der Text im Suchfeld sowie die mit einer angezeigten Antwort verbundene Frage sind unterschiedliche Dinge. Ein Benutzer kann die Eingabe während des Lesens des vorherigen Ergebnisses bearbeiten.

Modellieren Sie diesen Unterschied explizit. Behalten Sie die Entwurfs-eingabe, die Identität der eingereichten Abfrage oder Anfrage sowie den resultierenden Anfragedurchgang bei. Das Ergebnis sollte die Abfrage beibehalten, auf die es antwortet.

Bei suchbasierten Suchvorgängen weiß der Abfrageverarbeiter bereits, dass eine Suche angefordert wurde. Er kann die entsprechende Operation direkt aufrufen. Ein Boolean-Wert einzustellen, nur damit ein Effekt es bemerken kann, führt zu einer weiteren Übergangsphase, ohne den Arbeitsablauf zu klären.

Bei Echtzeit-Suchen gibt es eine andere Anforderung: Die Ergebnisse müssen einer sich entwickelnden Abfrage folgen. Eine Abfrageschicht oder ein Effekt mit festgelegter Lebensdauer kann diese Synchronisierung übernehmen. Wählen Sie zunächst das Verhalten und danach die Implementierungsgrenzen.

Ermitteln Sie Werte, die keinen eigenständigen Speicher benötigen

Falls die Anzahl der Ergebnisse aus dem sichtbaren Array stammt, berechnen Sie sie daraus. Das Speichern sowohl des Arrays als auch einer separat aktualisierten Anzahlszahl führt zu zwei Werten, die nicht übereinstimmen können.

Das Gleiche gilt für Labels, die aus dem aktuellen Zustand und einfacher Klientenseitige Filterung erstellt werden. Ein Effekt, bei dem ein React-Wert in einen anderen kopiert wird, ist oft ein Zeichen dafür, dass der zweite Wert stattdessen abgeleitet werden sollte.

Das bedeutet jedoch nicht, dass alle lokalen Zustände überflüssig sind. Ein editierbares Entwurf kann absichtlich von den Serverdaten abweichen. Entscheidend ist es, festzulegen, wann ein neuer Serverwert die Arbeit des Benutzers ersetzen darf.

Geben Sie asynchroner Arbeit einen klaren Verantwortlichen

Betrachten Sie zwei eingereichte Fragen. Anfrage A beginnt zuerst, Anfrage B beginnt zweitens und beendet sich zuerst. Wenn A später das Ergebnis bedingungslos ersetzt, wird auf dem Bildschirm eine Antwort auf die falsche Frage angezeigt.

Verknüpfen Sie Ergebnisse mit den Identitäten der Anfragen. Nur die aktive Anfrage darf das aktuelle Ergebnis ersetzen. Stellen Sie überflüssige Aufgaben ein, sofern der Transport die Stornierung unterstützt, und berücksichtigen Sie gleichzeitig die Möglichkeit, dass frühere Aufgaben bereits abgeschlossen sind.

Eine Abfrageschicht kann diese Funktionalitäten bereitstellen, oder ein spezieller Anfragencontroller kann sie implementieren. Der Komponente sollte einen expliziten Zustand wie „inaktiv“, „lädt“, „Erfolg“ oder „Fehler“ verwenden, anstatt eine Kette von Effekten zu koordinieren, deren Abhängigkeiten zufällig den nächsten Schritt auslösen.

Abonnements, Timer und Browser-Listener benötigen weiterhin eine Bereinigung während ihres Lebenszyklus. Betrachten Sie einen Effekt als Eigentum an einem externen Synchronisierungsprozess, bei dem Einrichtung und Bereinigung zusammen Sinn ergeben.

Lassen Sie Beweise an der Antwort beibehalten

Geben Sie die Antwort sowie ihre Quellenreferenzen als eine einzige Antwort im Zusammenhang mit der eingereichten Anfrage zurück. Wenn sich das aktive Ergebnis ändert, aktualisieren Sie beide gemeinsam.

Eine nützliche Quellenreferenz umfasst einen stabilen Quellidentifikator sowie die Position des entsprechenden Abschnitts. Der Workflow zur Quellqualität erläutert, warum ein alleiniger Titel unzureichend ist. Falls die Anwendung Vorschauen von Belegen unterstützt, müssen die Beziehungen zwischen jeder angezeigten Behauptung und dem zur Begründung bereitgestellten Abschnitt beibehalten werden.

Unterscheiden Sie ein leeres Ergebnis von einer unbeantworteten Frage sowie einem fehlgeschlagenen Antrag. Sie erfordern für den Leser unterschiedliche weitere Schritte, selbst wenn alle drei sonst zu einer leeren Liste führen würden.

Testen Sie die Interaktion zu ungünstigen Zeitpunkten

Senden Sie zwei Fragen schnell ab und verlangsamen Sie die erste Anfrage. Ändern Sie die Filter, während eine Anfrage aktiv ist. Verlassen Sie die Seite vor Abschluss der Anfrage. Versuchen Sie es erneut nach einem Fehler. Überprüfen Sie, ob die Antwort, die Abfragenbezeichnung und das Quellenpanel konsistent bleiben.

Diese Fälle erweitern die RAG-Bewertung auf die Benutzeroberfläche. Die Qualität der Belege ist nur dann von Bedeutung, wenn der Benutzer die mit der tatsächlich angeforderten Antwort verbundenen Belege sieht.