רוב היישומים שאנו יוצרים כיום צורכים נתונים ממקורות חיצוניים באמצעות ממשקי API. הם מביאים נתונים משרת ומציגים אותם בממשק המשתמש שלהם.

באמצעות React, אתה יכול ליצור הוק מותאם אישית כדי להביא נתונים מ-API. בהינתן כתובת URL, הוק זה יחזיר אובייקט המכיל את הנתונים והודעת שגיאה אופציונלית. לאחר מכן תוכל להשתמש בוו זה ברכיב.

יצירת וו React Custom

התחל ביצירת קובץ חדש בשם useFetch.js. בקובץ זה, צור פונקציה בשם useFetch() שמקבלת מחרוזת URL כפרמטר.

const useFetch = (url) => {
}

הקרס צריך לבצע את קריאת ה-API מיד לאחר ההתקשרות. אתה יכול להשתמש ב הוק של useEffect(). לזה.

עבור קריאות ה-API בפועל, השתמש בממשק ה-API של אחזור. API זה הוא ממשק מבוסס הבטחות המאפשר לך לשלוח בקשות ולקבל תגובות דרך HTTP באופן אסינכרוני.

ב-useFetch() הוק המותאם אישית, הוסף את הדברים הבאים.

יְבוּא { useEffect, useState } מ "לְהָגִיב";
const useFetch = (url) => {
const [data, setdata] = useState(ריק);
const [loading, setloading] = useState(נָכוֹן);
 const [error, seterror] = useState("");


useEffect(() => {
 להביא (כתובת אתר)
 .then((res) => res.json())





instagram viewer


 .then((נתונים) => {
seterror(נתונים.שְׁגִיאָה)
סט נתונים(נתונים.בדיחה)
 setloading(שֶׁקֶר)
 })
 }, [כתובת אתר]);


לַחֲזוֹר { נתונים, טעינה, שגיאה };
};
יְצוּאבְּרִירַת מֶחדָל useFetch;

בהוק הזה, אתה מאתחל לראשונה את המצב של שלושה ערכים:

  • נתונים: מכיל את תגובת ה-API.
  • שגיאה: מכיל הודעת שגיאה אם ​​מתרחשת שגיאה.
  • loading: מכיל ערך בוליאני המציין אם הוא הביא את נתוני ה-API. אתחל את מצב הטעינה למצב נכון. לאחר שה-API מחזיר נתונים, הגדר אותם ל-false.

ה- useEffect() hook לוקח את מחרוזת ה-URL כארגומנט. זה כדי להבטיח שהוא פועל בכל פעם שכתובת האתר משתנה.

הפונקציה useFetch() תחזיר אובייקט המכיל את ערכי הנתונים, הטעינה והשגיאה.

שימוש ב-React Custom Hook

כדי להשתמש בהוק המותאם אישית useFetch() שיצרת זה עתה, התחל בייבואו:

const useFetch = לִדרוֹשׁ("./useFetch")

לאחר מכן השתמש בו באופן הבא:

const {data, loading, error} = useFetch (url)

כדי להדגים, שקול את רכיב הבדיחות הבא:

const בדיחות = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? סוג=רווק>";
const { data, loading, error } = useFetch (url);
אם (טוען) לַחֲזוֹר (
<div>טוען...</div>
 )


לַחֲזוֹר (
<div>
 {שְׁגִיאָה &&<div>{שְׁגִיאָה}</div>}
 {נתונים &&<div>{<div>{נתונים}</div>}</div>}
</div>
 );
};
יְצוּאבְּרִירַת מֶחדָל בדיחות;

הוא קורא ל- useFetch() hook עם כתובת האתר ל-Jokes API ומקבל את ערכי הנתונים, הטעינה והשגיאה.

כדי לעבד את רכיב הבדיחות, בדוק תחילה אם הטעינה נכונה. אם כן, הצג הצהרת "טוען..." אחרת עבד את הנתונים ואת הודעת השגיאה אם ​​יש.

למה להשתמש ב-Custom React Hooks?

בדיוק כפי שהשתמשת ב-useFetch() Hook המותאם אישית ברכיב זה, תוכל להשתמש בו שוב ברכיבים אחרים. זה היופי בלהחצין את ההיגיון בווים במקום לכתוב אותו בכל רכיב.

הוקס הם תכונה רבת עוצמה של React שבה אתה יכול להשתמש כדי לשפר את המודולריות של הקוד שלך.