دليل جلب البيانات وعرضها من API في React JS

نشرت: 2024-10-01

يعد جلب البيانات وعرضها من واجهة برمجة التطبيقات (API) مهمة أساسية في تطبيقات React الحديثة. مع تطور React، أصبح جلب البيانات أكثر بساطة ويوفر طرقًا متعددة لتقديم طلبات HTTP. في هذا الدليل، سنغطي خطوات جلب البيانات وعرضها باستخدام React.

جدول المحتويات

تبديل

إعداد مشروع رد الفعل

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

  • npx create-react-app my-app
    cd my-app
    npm start

يؤدي هذا إلى تهيئة مشروع React جديد وتشغيل خادم تطوير.

️ خطوة بخطوة: جلب البيانات في React

1. إنشاء حالة لتخزين البيانات

استخدم الخطاف useState لإنشاء متغير حالة لتخزين البيانات التي تم جلبها.

جافا سكريبت

  • const [data, setData] = useState([]);

2. جلب بيانات واجهة برمجة التطبيقات (API) باستخدام useEffect

يضمن خطاف useEffect الخاص بـ React حدوث جلب البيانات عند تحميل المكون. يتم استخدام وظيفة fetch() لاسترداد البيانات من واجهة برمجة التطبيقات (API).

جافا سكريبت

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. عرض البيانات التي تم جلبها

بمجرد جلب البيانات، يمكن عرضها في JSX باستخدام طريقة map() :

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ استخدام Axios لجلب البيانات

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

تثبيت أكسيوس :

  • npm install axios

جلب البيانات

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ التعامل مع حالات الحافة

  • حالات التحميل : من المهم إدارة حالة التحميل أثناء جلب البيانات.
  • معالجة الأخطاء : يمكن أن يؤدي تنفيذ المعالجة المناسبة للأخطاء إلى تحسين تجربة المستخدم.

مثال:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

خاتمة

يعد جلب البيانات وعرضها من واجهات برمجة التطبيقات في React أمرًا ضروريًا لإنشاء تطبيقات الويب الديناميكية. سواء كنت تستخدم fetch() API أو مكتبة مثل Axios، فإن العملية تتضمن تحديد حالة لتخزين البيانات وتقديم الطلب وعرض النتائج. من خلال فهم هذه الخطوات والتعامل مع حالات الحافة مثل التحميل والأخطاء، يمكنك إنشاء تطبيقات سريعة الاستجابة ومعتمدة على البيانات بكفاءة.

الأسئلة المتداولة

1. كيف أقوم بإعداد مشروع React لبدء جلب بيانات API؟

لإعداد مشروع React، قم بتشغيل الأوامر التالية:

npx create-react-app my -app
cd my -app
npm start

يؤدي هذا إلى تهيئة المشروع وبدء تشغيل خادم التطوير.

2. كيف أقوم بتخزين البيانات التي تم جلبها في React؟

يمكنك تخزين البيانات التي تم جلبها باستخدام الخطاف useState . مثال:

const [data, setData] = useState ([]);

3. كيف يمكنني جلب البيانات في React عند تركيب المكون؟

استخدم الخطاف useEffect لجلب البيانات عند تثبيت المكون:

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. ما هو الغرض من استخدام طريقة الخريطة () في React عند عرض البيانات؟

يتم استخدام الأسلوب map() للتنقل خلال مصفوفة البيانات التي تم جلبها وعرض كل عنصر في JSX. على سبيل المثال:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. لماذا أستخدم Axios بدلاً من واجهة برمجة تطبيقات الجلب؟

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

6. كيف أقوم بتثبيت Axios في مشروع React الخاص بي؟

لتثبيت Axios، قم بتشغيل:

npm install axios

7. كيف يمكنني جلب البيانات باستخدام Axios في React؟

باستخدام Axios، يمكنك جلب البيانات مثل هذا:

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. كيف يمكنني التعامل مع حالات التحميل عند جلب البيانات في React؟

يمكنك إدارة حالات التحميل عن طريق إنشاء متغير loading باستخدام useState . على سبيل المثال:

const [loading, setLoading] = useState ( true );

تأثير الاستخدام () => {
جلب ( 'https://api.example.com/data' )
. ثم ( استجابة => استجابة. json ())
. ثم ( البيانات => {
setData (بيانات)؛
setLoading ( خطأ )؛
});
}, []);

9. كيف أتعامل مع الأخطاء عند جلب البيانات؟

لمعالجة الأخطاء، حدد حالة error وقم بتحديثها في حالة فشل الطلب:

const [error, setError] = useState ( null );

تأثير الاستخدام () => {
جلب ( 'https://api.example.com/data' )
. التقاط ( خطأ => {
setError (خطأ)؛
setLoading ( خطأ )؛
});
}, []);

10. لماذا من المهم التعامل مع حالات الحافة مثل التحميل والأخطاء في جلب واجهة برمجة التطبيقات؟

يضمن التعامل مع حالات الحافة مثل التحميل والأخطاء أن يكون المستخدمون على علم بالحالة الحالية لجلب البيانات ويوفر تجربة مستخدم أكثر سلاسة في الحالات التي يفشل فيها استرداد البيانات أو يستغرق وقتًا.