Kako posodobiti poizvedbene parametre v Reactu

Parametri poizvedbe so pari ime/vrednost, ki jih lahko dodate na konec URL-ja. Omogočajo vam shranjevanje podatkov na tem URL-ju.

Ena praktična uporaba parametrov poizvedbe je shranjevanje vrednosti iz uporabnikovega iskanja.

Uporaba usmerjevalnika React za posodobitev parametrov poizvedbe

Ko uporabnik vnese poizvedbo v iskalno vrstico, morate to poizvedbo shraniti v URL. Na primer, če je uporabnik na seznamu spletnih dnevnikov iskal objave v kategoriji »react«, bi moral posodobljen URL izgledati takole: /posts? oznaka=reagiraj.

React ponuja kljuko useSearchParams, ki vam pomaga prebrati ali posodobiti poizvedbene nize.

Za začetek ustvarite iskalno vrstico v App.js.

uvoz {useState} od"reagirati";
izvoz





instagram viewer

privzetofunkcijoaplikacija() {
konst [poizvedba, nastavitev poizvedbe] = useState('')
konst handleChange = (e) => {
setquery(e.tarča.vrednost)
 };
vrnitev (
<div>
<oblikavlogo="Iskanje">
<vnosonChange={handleChange}vrednost={poizvedba}vrsta="Iskanje" />
oblika>
div>
 );
}

Ne pozabite slediti najboljše prakse pri uporabi React da bi kar najbolje izkoristili.

Nato namestite usmerjevalnik React in svoji aplikaciji dodajte usmerjanje. To je nujno za delovanje kljuke useSearchParams.

uvoz Reagiraj od"reagirati";
uvoz ReactDOM od"react-dom/klient";
uvoz"./index.css";
uvoz aplikacija od"./Aplikacija";
uvoz {BrowserRouter, Route, Routes} od"react-router-dom";
konst root = ReactDOM.createRoot(dokument.getElementById("root"));
korenina.render(
<Reagiraj. StrictMode>
<BrowserRouter>
<Poti>
"/" element={} />
Poti>
BrowserRouter>
Reagiraj. StrictMode>
);

Zdaj lahko shranite poizvedbe v URL-ju, ko uporabnik vnese, tako da spremenite funkcijo handleChange().

uvoz {useState} od"reagirati";
uvoz {useSearchParams} od"react-router-dom";
izvozprivzetofunkcijoaplikacija() {
konst [poizvedba, nastavitev poizvedbe] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleChange = (e) => {
setSearchParams({ poizvedbo: e.target.value });
setquery(e.tarča.vrednost);
 };
vrnitev (
<div>
<oblikavlogo="Iskanje">
<vnosonChange={handleChange}vrednost={poizvedba}vrsta="Iskanje" />
oblika>
div>
 );
}

Pridobivanje vrednosti poizvedbe iz URL-ja

Eno vrednost poizvedbe lahko dobite z uporabo searchParams.get() in posredovanjem imena poizvedbenega parametra.

konst [searchParams, setSearchParams] = useSearchParams({});
konst vrednost = searchParams.get('oznaka')

Če želite pridobiti vse parametre poizvedbe, uporabite searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst vrednosti = searchParams.entries()

Ta metoda vrne iterator, ki ga lahko ponovite z uporabo parov ključ/vrednost.

za (konst [ključ, vrednost] od vrednote) {
konzola.log(`${ključ}, ${value}`);
}

Pari ključ/vrednost so v vrstnem redu, kot so prikazani v URL-ju.

Uporabite poizvedbene parametre za izboljšanje skupne rabe rezultatov iskanja

Kavelj useSearchParams je odličen za shranjevanje iskalnih vrednosti ali drugih podatkov kot poizvedbenih parametrov v URL-ju.

Iskanim vrednostim lahko sledite tudi s kavljem useState, vendar njihovo shranjevanje v poizvedbenem parametru pomeni, da jih lahko ljudje delijo prek URL-ja.