➿ 🧙🏼 🎒 Arbeiten mit einer Abfragezeichenfolge in React 🕦 💅🏻 🗳️

Hallo. Dies ist der Artikel über das Paket, das ich bei der Arbeit mit React verpasst habe.

Bild

Genauer gesagt, über ein Paket zur Verbesserung und Erleichterung der Arbeit mit Abfragen aus der Suchleiste.

Wie machst du das jetzt?

Werte abrufen

Wie erhält man den Wert aus der Abfragezeichenfolge? Ich denke so etwas:

const { item } = queryString.parse(props.location.search);

Wenn Sie mit URLSearchParams vertraut sind, können Sie dies folgendermaßen tun:

const params = new URLSearchParams(props.location.search);
const item = params.get('item');

Welche Option vorzuziehen ist, ist nicht ganz klar, da Der erste ruft das npm-Paket auf, funktioniert aber überall und der zweite ist in den Browser integriert, es kann jedoch zu Problemen mit dem IE ( Mozilla ) kommen.

Werte einstellen

Wir haben es irgendwie geklärt, aber trotzdem genau das gleiche Ergebnis erzielt, wie wir wollten. Fahren wir mit der Einstellung der Werte fort. Dies geschieht alles mit history.push, das eine Zeichenfolge mit bereits hinzugefügten Parametern verwendet. Zum Beispiel so:

history.push('/path?item=my-item-data')

Für komplexere Konstruktionen müssen Sie einen Querystring verwenden:

const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${query}`);

oder URLSearchParams:

const query = new URLSearchParams();
query.set("item", "my-item-data");
history.push(`/?${query}`);

Auswirkungen

Okay. Trotz der Tatsache, dass wir immer Zeichenfolgendaten erhalten (und diese analysieren müssen), gibt es auch ein Problem, wenn wir eine Ziffer erwarten, aber ein Wort kommt (dem Benutzer ist es nicht verboten, die Abfrage in der Zeichenfolge zu ändern), müssen wir Überprüfungen umzäunen und den Wert verschieben dich selbst.

Die meisten Probleme treten auf, wenn die Anforderungsfelder von den jetzt angezeigten Komponenten abhängen müssen. Jetzt arbeitet jede Komponente mit einem globalen Status. Wenn Sie ihn nach eigenem Ermessen ändern und den bereits vorhandenen Wert verwenden, müssen Sie nicht nur Ihre eigenen Werte hinzufügen, um ihn hinzuzufügen und auch der ganze Rest muss angepasst werden, so etwas:

const oldQuery = queryString.parse(location.search);
const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${{...oldQuery,  ...query}}`);

Natürlich werden Sie dies höchstwahrscheinlich in eine Funktion verschieben, und es wird bereits bequemer sein, damit zu arbeiten. Aber dann müssen Sie Funktionen zum Lesen von Werten, Überprüfen von Werten, zum Behandeln von Fehlern, die mit den übergebenen Werten verbunden sind, und sogar zum erneuten Verschieben von Werten umzäunen. Andernfalls haben wir den Wert für uns selbst geändert und die Zeichenfolge unverändert gelassen.

Sie müssen den Wert auch später nach sich selbst löschen, natürlich wird history.push dies für Sie tun, aber es ist viel einfacher, sich nicht darum zu kümmern und andere es anstelle von Ihnen tun zu lassen.

Okay. Was schlage ich vor?

Ich glaube, ich habe es für Sie getan, und zwar auf bequemere Weise. Als nächstes werden wir über das npm-Paket "React

-Location-Query" sprechen , das Ihre Aufmerksamkeit wert sein könnte.

Das Paket implementiert Hooks und HOC-Komponenten (nur ein Wrapper über den Hooks), um die Regeln für die Funktionsweise von Parametern in der Suchleiste festzulegen, in der wir den Wert in einer der Komponenten festlegen oder in einer anderen Komponente abrufen können (noch höher im Baum, aber das sollten Sie nicht tun). ).

Beispiel

Beispielsweise gibt es eine UsersPage-Seite mit den Komponenten UsersList und Controls. UsersList dient zum Laden und Anzeigen einer Benutzerliste und Controls zum Festlegen der Benutzerfilterung. Alles kann so dargestellt werden:

const UsersPage = () => {
  const [type] = useLocationField('type', 'github');

  return ...;
}

const UsersList = () => {
  const [page, setPage] = useLocationField('page', {
    type: 'number',
    initial: 1,
    hideIfInitial: true
  });
  const [limit, setLimit] = useLocationField('limit', {
    type: 'number',
    initial: 20,
    hideIfInitial: true
  });
  const [type] = useLocationField('type');

  return ...;
}

const Controls = () => {
  const [type, setType] = useLocationField('type');
 //     type  setType
  return ...;
}

Wie wir sehen können, haben wir für die Seiten- und Grenzwertfelder ein Objekt mit den folgenden Optionen verwendet:

type — ( , )
initial — ,
hideIfInitial — : , (.. ), ,

Um das Feld und seinen Wert anzupassen, gibt es andere Felder, z. B. einen Rückruf (der einen neuen Wert zurückgibt), falls der Wert nicht analysiert werden kann (eine Zeichenfolge wurde übergeben, aber ein Zahlen- / Boolescher Wert wurde erwartet). Alle diese Felder können in der README- Datei auf der npm- Paketseite oder auf github angezeigt werden. Außerdem eine

kleine Beschreibung der vorhandenen Hooks:

useLocationField - Hook zum Arbeiten mit nur einem Wert
useLocationQuery - mehrwertiger Hook
useLocationQueryExtend - Ein Hook zum Arbeiten mit vielen Werten, deren Daten außerhalb des Geltungsbereichs der Standards liegen (z. B. json ).
useLocationClear - Ein Hook, um loszulegen. Sie müssen ihn in die Root-Komponente einfügen (ohne ihn werden die Felder nicht gelöscht), oder Sie müssen ihn nicht ablegen, wenn bereits einige der oben beschriebenen Hooks vorhanden sind

Zusätzlich zu den Haken gibt es auch HOC-Komponenten, die ihre Wrapper für die Haken sind.

Fusszeile

Dieser Artikel wurde geschrieben, um andere über das Vorhandensein dieses Pakets zu informieren. Es gibt viele weitere Tricks, die ich dort implementieren möchte (z. B. Enum Value), während ich auf Feedback und Informationen warte, ob dieses Paket zumindest ein wenig Recht auf Leben hat oder völlig unnötig ist.

Arbeiten mit einer Abfragezeichenfolge in React