Како ажурирати параметре упита у Реацт-у

Параметри упита су парови име/вредност које можете да додате на крај УРЛ-а. Они вам омогућавају да чувате податке у тој УРЛ адреси.

Једна практична примена параметара упита је чување вредности из претраге корисника.

Коришћење Реацт рутера за ажурирање параметара упита

Када корисник унесе упит у траку за претрагу, требало би да сачувате тај упит у УРЛ-у. На пример, ако је корисник претражио листу блогова за постове у категорији „реаговање“, ажурирани УРЛ би требало да изгледа овако: /posts? таг=реаговати.

Реацт обезбеђује усеСеарцхПарамс куку која вам помаже да читате или ажурирате низове упита.

Да бисте започели, направите траку за претрагу у Апп.јс.

увоз { усеСтате } из"реаговати";
извозУобичајенофункцијаАпликација() 

instagram viewer
{
конст [куери, сеткуери] = усеСтате('')
конст хандлеЦханге = (е) => {
сеткуери(е.таргет.вредност)
 };
повратак (
<див>
<формуулога="Претрага">
<улазнионЦханге={хандлеЦханге}вредност={куери}тип="Претрага" />
форму>
див>
 );
}

Не заборавите да пратите најбоље праксе када користите Реацт да извучемо максимум из њих.

Затим инсталирајте Реацт рутер и додајте рутирање својој апликацији. Ово је неопходно да би усеСеарцхПарамс кука радила.

увоз Реаговати из"реаговати";
увоз РеацтДОМ из"реаговање-дом/клијент";
увоз"./индек.цсс";
увоз Апликација из"./Апликација";
увоз { БровсерРоутер, Роуте, Роутес } из"реаговати-рутер-дом";
конст роот = РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд("корен"));
корен.дати, пружити(
<Реаговати. СтрицтМоде>
<БровсерРоутер>
<Руте>
"/" елемент={} />
Руте>
БровсерРоутер>
Реаговати. СтрицтМоде>
);

Сада можете да сачувате упите у УРЛ-у онако како их корисник куца модификујући функцију хандлеЦханге().

увоз { усеСтате } из"реаговати";
увоз { усеСеарцхПарамс } из"реаговати-рутер-дом";
извозУобичајенофункцијаАпликација() {
конст [куери, сеткуери] = усеСтате("");
конст [сеарцхПарамс, сетСеарцхПарамс] = усеСеарцхПарамс({});
конст хандлеЦханге = (е) => {
сетСеарцхПарамс({ упит: е.таргет.валуе });
сеткуери(е.таргет.вредност);
 };
повратак (
<див>
<формуулога="Претрага">
<улазнионЦханге={хандлеЦханге}вредност={куери}тип="Претрага" />
форму>
див>
 );
}

Добијање вредности упита са УРЛ адресе

Можете добити једну вредност упита користећи сеарцхПарамс.гет() и прослеђивање имена параметра упита.

конст [сеарцхПарамс, сетСеарцхПарамс] = усеСеарцхПарамс({});
конст вредност = сеарцхПарамс.гет('ознака')

Да бисте добили све параметре упита, користите сеарцхПарамс.ентриес().

конст [сеарцхПарамс, сетСеарцхПарамс] = усеСеарцхПарамс({});
конст вредности = сеарцхПарамс.ентриес()

Овај метод враћа итератор који можете итерирати користећи парове кључ/вредност.

за (конст [кључ, вредност] оф вредности) {
конзола.Пријава(`${кеи}, ${валуе}`);
}

Парови кључ/вредност су оним редоследом којим се појављују у УРЛ-у.

Користите параметре упита да бисте побољшали могућност дељења резултата претраге

УсеСеарцхПарамс кука је одлична за чување вредности претраге или било којих других података као параметара упита у УРЛ-у.

Такође можете да пратите вредности претраге помоћу куке усеСтате, али њихово складиштење у параметру упита значи да људи могу да их деле преко УРЛ-а.