Kā atjaunināt vaicājuma parametrus programmā React

Vaicājuma parametri ir nosaukuma/vērtības pāri, ko varat pievienot URL beigās. Tie ļauj saglabāt datus šajā URL.

Viens praktisks vaicājuma parametru pielietojums ir vērtību saglabāšana no lietotāja meklēšanas.

React maršrutētāja izmantošana vaicājuma parametru atjaunināšanai

Kad lietotājs meklēšanas joslā ievada vaicājumu, šis vaicājums ir jāsaglabā vietrādī URL. Piemēram, ja lietotājs emuāru sarakstā meklēja ziņas kategorijā “reaģēt”, atjauninātajam URL vajadzētu izskatīties šādi: /posts? tag=reaģēt.

React nodrošina useSearchParams āķi, kas palīdz lasīt vai atjaunināt vaicājumu virknes.

Lai sāktu, izveidojiet meklēšanas joslu pakalpojumā App.js.

imports { useState } no"reaģēt";
eksportētnoklusējumafunkcijuApp() {
konst





instagram viewer
 [query, setquery] = useState('')
konst rokturisMainīt = (e) => {
Setquery(e.target.vērtība)
 };
atgriezties (
<div>
<formālomu="Meklēt">
<ievadeonChange={handleChange}vērtību={query}veids="Meklēt" />
formā>
div>
 );
}

Atcerieties sekot paraugprakse, lietojot React lai no tām gūtu maksimālu labumu.

Pēc tam instalējiet React maršrutētāju un pievienojiet maršrutēšanu savai lietojumprogrammai. Tas ir nepieciešams, lai useSearchParams āķis darbotos.

imports Reaģēt no"reaģēt";
imports ReactDOM no"react-dom/client";
imports"./index.css";
imports App no"./Lietotne";
imports { BrowserRouter, Route, Routes } no"react-router-dom";
konst root = ReactDOM.createRoot(dokumentu.getElementById("sakne"));
sakne.renderēt(
<Reaģēt. StrictMode>
<BrowserRouter>
<Maršruti>
"/" elements={} />
Maršruti>
BrowserRouter>
Reaģēt. StrictMode>
);

Tagad varat saglabāt vaicājumus vietrādī URL, kad lietotājs ieraksta, mainot funkciju handleChange().

imports { useState } no"reaģēt";
imports { useSearchParams } no"react-router-dom";
eksportētnoklusējumafunkcijuApp() {
konst [query, setquery] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst rokturisMainīt = (e) => {
setSearchParams({ vaicājums: e.target.value });
Setquery(e.target.vērtība);
 };
atgriezties (
<div>
<formālomu="Meklēt">
<ievadeonChange={handleChange}vērtību={query}veids="Meklēt" />
formā>
div>
 );
}

Vaicājuma vērtību iegūšana no URL

Varat iegūt vienu vaicājuma vērtību, izmantojot searchParams.get() un nododot vaicājuma parametra nosaukumu.

konst [searchParams, setSearchParams] = useSearchParams({});
konst vērtība = searchParams.get("atzīme")

Lai iegūtu visus vaicājuma parametrus, izmantojiet searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst vērtības = searchParams.entries()

Šī metode atgriež iteratoru, kuru varat atkārtot, izmantojot atslēgu/vērtību pārus.

priekš (konst [atslēga, vērtība] no vērtības) {
konsole.log(`${key}, ${value}`);
}

Atslēgas/vērtības pāri ir tādā secībā, kādā tie tiek parādīti URL.

Izmantojiet vaicājuma parametrus, lai uzlabotu meklēšanas rezultātu kopīgojamību

UseSearchParams āķis ir lieliski piemērots meklēšanas vērtību vai citu datu kā vaicājuma parametru glabāšanai URL.

Varat arī izsekot meklēšanas vērtībām, izmantojot āķi useState, taču, saglabājot tās vaicājuma parametrā, lietotāji var tās kopīgot, izmantojot URL.