Ako aktualizovať parametre dotazu v React

Parametre dopytu sú páry názov/hodnota, ktoré môžete pridať na koniec adresy URL. Umožňujú vám ukladať údaje do tejto adresy URL.

Jednou z praktických aplikácií parametrov dopytu je ukladanie hodnôt z vyhľadávania používateľa.

Používanie smerovača React na aktualizáciu parametrov dotazu

Keď používateľ zadá dopyt do vyhľadávacieho panela, mali by ste ho uložiť do adresy URL. Ak napríklad používateľ hľadal v zozname blogov príspevky v kategórii „reakcia“, aktualizovaná adresa URL by mala vyzerať takto: /posts? tag=reagovať.

React poskytuje háčik useSearchParams, ktorý vám pomôže čítať alebo aktualizovať reťazce dopytov.

Ak chcete začať, vytvorte vyhľadávací panel v App.js.

importovať { useState } od"reagovať";
exportpredvolená





instagram viewer

funkciuApp() {
konšt [query, setquery] = useState('')
konšt handleZmena = (e) => {
setquery(e.cieľ.hodnota)
 };
vrátiť (
<div>
<formulárúlohu="Vyhľadávanie">
<vstuppri zmene={handleChange}hodnotu={dopyt}typu="Vyhľadávanie" />
formulár>
div>
 );
}

Nezabudnite sledovať osvedčené postupy pri používaní React aby ste z nich vyťažili maximum.

Ďalej nainštalujte smerovač React a pridajte smerovanie do svojej aplikácie. Toto je nevyhnutné, aby hák useSearchParams fungoval.

importovať Reagovať od"reagovať";
importovať ReactDOM od"react-dom/client";
importovať"./index.css";
importovať App od"./App";
importovať { BrowserRouter, Route, Routes } od"react-router-dom";
konšt root = ReactDOM.createRoot(dokument.getElementById("koreň"));
koreň.vykresliť(
<Reagovať. StrictMode>
<BrowserRouter>
<Trasy>
"/" element={} />
Trasy>
BrowserRouter>
Reagovať. StrictMode>
);

Teraz môžete uložiť dopyty do adresy URL, keď používateľ zadáva, úpravou funkcie handleChange().

importovať { useState } od"reagovať";
importovať { useSearchParams } od"react-router-dom";
exportpredvolenáfunkciuApp() {
konšt [query, setquery] = useState("");
konšt [searchParams, setSearchParams] = useSearchParams({});
konšt handleZmena = (e) => {
setSearchParams({ dopyt: e.cieľová.hodnota});
setquery(e.cieľ.hodnota);
 };
vrátiť (
<div>
<formulárúlohu="Vyhľadávanie">
<vstuppri zmene={handleChange}hodnotu={dopyt}typu="Vyhľadávanie" />
formulár>
div>
 );
}

Získanie hodnôt dopytu z adresy URL

Jednu hodnotu dopytu môžete získať pomocou searchParams.get() a odovzdaním názvu parametra dopytu.

konšt [searchParams, setSearchParams] = useSearchParams({});
konšt hodnota = searchParams.get('značka')

Ak chcete získať všetky parametre dopytu, použite searchParams.entries().

konšt [searchParams, setSearchParams] = useSearchParams({});
konšt hodnoty = searchParams.entries()

Táto metóda vráti iterátor, ktorý môžete iterovať pomocou párov kľúč/hodnota.

pre (konšt [kľúč, hodnota] z hodnoty) {
konzoly.log(`${key}, ${value}`);
}

Páry kľúč/hodnota sú v poradí, v akom sa zobrazujú vo webovej adrese.

Použite parametre dopytu na zlepšenie zdieľateľnosti výsledkov vyhľadávania

Hák useSearchParams je skvelý na ukladanie hodnôt vyhľadávania alebo akýchkoľvek iných údajov ako parametrov dopytu v adrese URL.

Hodnoty vyhľadávania môžete sledovať aj pomocou háku useState, ale ich uloženie v parametri dopytu znamená, že ich ľudia môžu zdieľať prostredníctvom adresy URL.