تستهلك معظم التطبيقات التي نقوم بإنشائها اليوم بيانات من مصادر خارجية من خلال واجهات برمجة التطبيقات. يقومون بجلب البيانات من الخادم وعرضها في واجهة المستخدم الخاصة بهم.

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

إنشاء خطاف رد فعل مخصص

ابدأ بإنشاء ملف جديد يسمى useFetch.js. في هذا الملف ، قم بإنشاء دالة تسمى useFetch () تقبل سلسلة URL كمعامل.

مقدار ثابت useFetch = (url) => {
}

يجب على الخطاف قم بإجراء استدعاء API فور استدعائها. يمكنك استخدام ال خطاف useEffect () لهذا.

بالنسبة لاستدعاءات API الفعلية ، استخدم fetch API. واجهة برمجة التطبيقات هذه هي واجهة قائمة على الوعد تسمح لك بتقديم الطلبات وتلقي الردود عبر HTTP بشكل غير متزامن.

في الخطاف المخصص useFetch () ، أضف ما يلي.

يستورد {useEffect، useState} من "تتفاعل"؛
مقدار ثابت useFetch = (url) => {
مقدار ثابت [data، setdata] = useState (لا شيء);
مقدار ثابت [تحميل ، تحميل مجموعة] = useState (حقيقي);
 const [error، seterror] = useState ("");







instagram viewer



useEffect (() => {
 جلب (url)
 ثم ((الدقة) => res.json ())
 ثم ((البيانات) => {
خطأ(بيانات.خطأ)
setdata(بيانات.نكتة)
 تحميل مجموعة (خاطئة)
 })
 }, [عنوان url]);


إرجاع {البيانات ، التحميل ، الخطأ} ؛
};
يصدّرإفتراضي useFetch.

في هذا الخطاف ، تقوم أولاً بتهيئة حالة القيم الثلاث:

  • data: حاصل على استجابة API.
  • خطأ: تظهر رسالة خطأ في حالة حدوث خطأ.
  • تحميل: يحمل قيمة منطقية تشير إلى ما إذا كان قد جلب بيانات API. تهيئة حالة التحميل إلى "صواب". بمجرد إرجاع واجهة برمجة التطبيقات للبيانات ، اضبطها على خطأ.

يأخذ الخطاف useEffect () سلسلة URL كوسيطة. هذا لضمان تشغيله في كل مرة يتغير فيها عنوان URL.

ستعيد الدالة useFetch () كائنًا يحتوي على قيم البيانات والتحميل والخطأ.

استخدام خطاف React المخصص

لاستخدام الخطاف المخصص useFetch () الذي أنشأته للتو ، ابدأ باستيراده:

مقدار ثابت useFetch = يتطلب("./useFetch")

ثم استخدمه على النحو التالي:

مقدار ثابت {data، loading، error} = useFetch (url)

للتوضيح ، ضع في اعتبارك مكون النكات التالي:

مقدار ثابت نكت = () => {
 عنوان url = "<https://sv443.net/jokeapi/v2/joke/Programming? اكتب = أعزب>";
مقدار ثابت {data، loading، error} = useFetch (url)؛
إذا (جار التحميل) إرجاع (
<شعبة>جار التحميل...</div>
 )


إرجاع (
<شعبة>
 {خطأ &&<شعبة>{خطأ}</div>}
 {بيانات &&<شعبة>{<شعبة>{بيانات}</div>}</div>}
</div>
 );
};
يصدّرإفتراضي نكات؛

يستدعي الخطاف useFetch () بعنوان URL إلى واجهة برمجة تطبيقات النكات ويتلقى البيانات ، والتحميل ، وقيم الخطأ.

لتصيير مكوِّن النكات ، تحقق أولاً مما إذا كان التحميل صحيحًا. إذا كان الأمر كذلك ، اعرض عبارة "Loading…" وإلا فعرض البيانات ورسالة الخطأ إن وجدت.

لماذا استخدام خطافات التفاعل المخصصة؟

تمامًا كما استخدمت الخطاف المخصص useFetch () في هذا المكون ، يمكنك إعادة استخدامه مرة أخرى في مكونات أخرى. هذا هو جمال إخراج المنطق في الخطافات بدلاً من كتابته في كل مكون.

الخطافات هي ميزة قوية في React يمكنك استخدامها لتحسين نمطية الكود الخاص بك.