العمل مع سلسلة استعلام في React

مهلا. هذه هي المقالة حول الحزمة التي فاتني العمل مع رد الفعل.







لنكون أكثر تحديدًا ، حول حزمة لتحسين وتسهيل العمل مع الاستعلامات من شريط البحث.

كيف تفعل ذلك الآن

استرجاع القيم

كيف تحصل على القيمة من سلسلة الاستعلام؟ أعتقد أن شيئًا كهذا:

const { item } = queryString.parse(props.location.search);

أو إذا كنت معتادًا على URLSearchParams ، يمكنك القيام بذلك على النحو التالي:

const params = new URLSearchParams(props.location.search);
const item = params.get('item');

الخيار الأفضل ليس واضحًا تمامًا ، منذ ذلك الحين الأول يسحب حزمة npm ، لكنه يعمل في كل مكان ، والثاني مدمج في المتصفح ، ولكن قد تكون هناك مشاكل مع IE ( mozilla ).

تحديد القيم

لقد توصلنا إلى الإيصال ، بطريقة ما ، لكننا حصلنا على نفس النتيجة تمامًا كما أردنا. دعنا ننتقل إلى تحديد القيم. يتم كل هذا باستخدام history.push ، والذي يأخذ سلسلة مع معلمات مضافة بالفعل. على سبيل المثال مثل هذا:

history.push('/path?item=my-item-data')

بالنسبة للإنشاءات الأكثر تعقيدًا ، ستحتاج إلى استخدام سلسلة استعلام:

const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${query}`);

أو URLSearchParams:

const query = new URLSearchParams();
query.set("item", "my-item-data");
history.push(`/?${query}`);

تأثيرات

حسنا. على الرغم من حقيقة أننا نتلقى دائمًا بيانات سلسلة (ونحتاج إلى تحليلها) ، فهناك أيضًا مشكلة إذا توقعنا رقمًا ، ولكن تأتي كلمة (لا يُمنع المستخدم من تغيير الاستعلام في السلسلة) ، فسيتعين علينا سياج الشيكات ودفع القيمة نفسك.



يأتي معظم الألم عندما يكون من الضروري أن تعتمد حقول الطلب على المكونات التي يتم عرضها الآن ، والآن سيعمل كل مكون مع حالة عالمية واحدة ، وتغييرها وفقًا لتقديرك ، اعتمادًا على القيمة الموجودة بالفعل ، سيتعين عليك إضافة ليس فقط القيم الخاصة بك لإضافة ، وأيضًا كل الباقي المطلوب تعديله ، شيء مثل هذا:

const oldQuery = queryString.parse(location.search);
const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${{...oldQuery,  ...query}}`);

بالطبع ، على الأرجح ستنقل هذا إلى وظيفة ، وسيكون العمل معها أكثر ملاءمة بالفعل. ولكن بعد ذلك سيتعين عليك تحديد الوظائف لقراءة القيم ، والتحقق من القيم ، ومعالجة الأخطاء المرتبطة بالقيم التي تم تمريرها بطريقة أو بأخرى ، وحتى دفعها مرة أخرى ، وإلا قمنا بتغيير القيمة لأنفسنا ، وتركنا السلسلة كما هي.



تحتاج أيضًا إلى مسح القيمة بعدك لاحقًا ، بالطبع ، history.push سوف يفعل ذلك نيابة عنك ، لكن من الأسهل بكثير عدم الإزعاج والسماح للآخرين بالقيام بذلك بدلاً منك.

حسنا. ماذا أقترح؟

أعتقد أنني فعلت ذلك من أجلك ، وبطريقة أكثر ملاءمة. بعد ذلك ، سنتحدث عن حزمة

رد الفعل-الموقع-استعلام npm ، والتي قد تستحق اهتمامك .



تقوم الحزمة بتنفيذ الخطافات ومكونات HOC (مجرد غلاف فوق الخطافات) لتعيين قواعد المعلمات في شريط البحث ، حيث نقوم بتعيين القيمة في أحد المكونات ، أو يمكننا الحصول عليها في أي مكون آخر (حتى أعلى في الشجرة ، لكن لا يجب عليك القيام بذلك) ).

مثال

على سبيل المثال ، هناك صفحة UsersPage مع قائمة المستخدمين والمكونات. UsersList هي لتحميل وعرض قائمة المستخدمين ، وعناصر التحكم لإعداد تصفية المستخدم. يمكن تمثيل كل شيء على النحو التالي:

const UsersPage = () => {
  const [type] = useLocationField('type', 'github');

  return ...;
}

const UsersList = () => {
  const [page, setPage] = useLocationField('page', {
    type: 'number',
    initial: 1,
    hideIfInitial: true
  });
  const [limit, setLimit] = useLocationField('limit', {
    type: 'number',
    initial: 20,
    hideIfInitial: true
  });
  const [type] = useLocationField('type');

  return ...;
}

const Controls = () => {
  const [type, setType] = useLocationField('type');
 //     type  setType
  return ...;
}

كما نرى ، بالنسبة للصفحة وحقول التحديد ، استخدمنا كائنًا مع الخيارات التالية:

• type — ( , )
• initial — ,
• hideIfInitial — : , (.. ), ,

لتخصيص الحقل وقيمته ، هناك حقول أخرى ، على سبيل المثال ، رد نداء (والذي يُرجع قيمة جديدة) في حالة استحالة تحليل القيمة (تم تمرير سلسلة ، ولكن كان من المتوقع وجود رقم / قيمة منطقية). كل هذه الحقول يمكن رؤيتها في README على صفحة الحزمة npm أو على github. أيضًا



وصف صغير للخطافات الموجودة:

• useLocationField - خطاف للعمل بقيمة واحدة فقط
• useLocationQuery - ربط متعدد القيم
• useLocationQueryExtend - أداة ربط للعمل مع العديد من القيم التي تكون بياناتها خارج إطار عمل المعايير (على سبيل المثال json )
• useLocationClear - خطاف للبدء ، تحتاج إلى وضعه في مكون الجذر (بدونه ، لن يتم مسح الحقول) ، أو لا تحتاج إلى وضعه إذا كان هناك بالفعل بعض الخطافات الموضحة أعلاه

أيضًا ، بالإضافة إلى الخطافات ، هناك مكونات HOC هي أغلفة للخطافات.

تذييل

تمت كتابة هذه المقالة لإخطار الآخرين بوجود هذه الحزمة. هناك العديد من الحيل التي أريد تنفيذها هناك (على سبيل المثال ، تعداد القيمة) ، بينما أنتظر ردود الفعل والمعلومات ما إذا كانت هذه الحزمة لها على الأقل القليل من الحق في الحياة أو أنها غير ضرورية تمامًا.