كيفية تحديث معاملات الاستعلام في React

معلمات الاستعلام هي أزواج الاسم / القيمة التي يمكنك إضافتها إلى نهاية عنوان URL. إنها تسمح لك بتخزين البيانات في عنوان URL هذا.

أحد التطبيقات العملية لمعلمات طلب البحث هو تخزين القيم من بحث المستخدم.

استخدام React Router لتحديث معلمات الاستعلام

عندما يقوم المستخدم بإدخال استعلام في شريط البحث ، يجب عليك تخزين هذا الاستعلام في عنوان URL. على سبيل المثال ، إذا بحث أحد المستخدمين في قائمة المدونات عن منشورات في فئة "رد فعل" ، فيجب أن يبدو عنوان URL المحدث على النحو التالي: /posts? العلامة = رد فعل.

يوفر React أداة ربط useSearchParams التي تساعدك على قراءة سلاسل الاستعلام أو تحديثها.

للبدء ، أنشئ شريط بحث في App.js.

يستورد {useState} من"تتفاعل";
يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت [استعلام ، setquery] = useState ('')
مقدار ثابت handleChange = (ه) => {
سيتكويري(ه.هدف.قيمة





instagram viewer
)
 };
يعود (
<شعبة>
<استمارةدور="يبحث">
<مدخلعلى التغيير={التعامل مع التغيير}قيمة={استفسار}يكتب="يبحث" />
استمارة>
شعبة>
 );
}

تذكر أن تتبع أفضل الممارسات عند استخدام React لتحقيق أقصى استفادة منها.

بعد ذلك ، قم بتثبيت جهاز التوجيه React وإضافة التوجيه إلى التطبيق الخاص بك. هذا أمر لا بد منه لربط useSearchParams للعمل.

يستورد تتفاعل من"تتفاعل";
يستورد رد فعل من"رد فعل دوم / العميل";
يستورد"./index.css";
يستورد برنامج من"./برنامج";
يستورد {BrowserRouter ، Route ، Routes} من"رد فعل جهاز التوجيه دوم";
مقدار ثابت الجذر = ReactDOM.createRoot (وثيقة.getElementById ("جذر"));
جذر.يجعل(
<تتفاعل. الوضع الصارم>
<المستعرض>
<طرق>
"/" العنصر = {} />
طرق>
المستعرض>
تتفاعل. الوضع الصارم>
);

يمكنك الآن حفظ الاستعلامات في عنوان URL لأنواع المستخدمين عن طريق تعديل وظيفة handleChange ().

يستورد {useState} من"تتفاعل";
يستورد {useSearchParams} من"رد فعل جهاز التوجيه دوم";
يصدّرتقصيروظيفةبرنامج() {
مقدار ثابت [استعلام ، setquery] = useState ("");
مقدار ثابت [searchParams، setSearchParams] = useSearchParams ({}) ؛
مقدار ثابت handleChange = (ه) => {
setSearchParams({ استفسار: e.target.value}) ؛
سيتكويري(ه.هدف.قيمة);
 };
يعود (
<شعبة>
<استمارةدور="يبحث">
<مدخلعلى التغيير={التعامل مع التغيير}قيمة={استفسار}يكتب="يبحث" />
استمارة>
شعبة>
 );
}

الحصول على قيم الاستعلام من عنوان URL

يمكنك الحصول على قيمة استعلام واحدة باستخدام searchParams.get () وتمرير اسم معلمة الاستعلام.

مقدار ثابت [searchParams، setSearchParams] = useSearchParams ({}) ؛
مقدار ثابت value = searchParams.get ('بطاقة شعار')

للحصول على جميع معلمات الاستعلام ، استخدم searchParams.entries ().

مقدار ثابت [searchParams، setSearchParams] = useSearchParams ({}) ؛
مقدار ثابت القيم = searchParams.entries ()

ترجع هذه الطريقة مكررًا يمكنك تكراره باستخدام أزواج المفتاح / القيمة.

ل (مقدار ثابت [مفتاح ، قيمة] ل قيم) {
وحدة التحكم.سجل(`$ {مفتاح}, {القيمة}`);
}

تكون أزواج المفتاح / القيمة بالترتيب الذي تظهر به في عنوان URL.

استخدم معامِلات طلب البحث لتحسين إمكانية مشاركة نتائج البحث

يعتبر الخطاف useSearchParams رائعًا لتخزين قيم البحث أو أي بيانات أخرى كمعلمات استعلام في عنوان URL.

يمكنك أيضًا تتبع قيم البحث باستخدام خطاف useState ، ولكن تخزينها في معلمة استعلام يعني أنه يمكن للأشخاص مشاركتها عبر عنوان URL.