جلب البيانات بطريقة React
قم بتحميل البيانات البعيدة إلى مكونات React باستخدام useEffect وuseState، وقم بعرض حالات التحميل والخطأ بشكل معلن، وحافظ على واجهة المستخدم متزامنة مع بياناتك.
سنغطي ما يلي...
في JavaScript التقليدية، نجلب البيانات ونربط عقد DOM معًا بشكل إلزامي. أما في React، فنجلب مرة واحدة ونعرض بشكل إعلاني . تصبح حالة المكون المصدر الوحيد للحقيقة، لذا تُعاد واجهة المستخدم لدينا العرض تلقائيًا عند وصول البيانات أو فشلها. يكمن مفتاح في وضع تأثيرات جانبية - مثل جلب البيانات - داخلuseEffect ، يديرloading /error في الحالة، وتقديم واجهة المستخدم المناسبة لكل حالة.
الفكرة الأساسية
يجب أن يكون مُكوِّن React ربطًا مباشرًا بين الحالة وواجهة المستخدم . جلب البيانات هو أثر جانبي يحدث بعد ظهور المُكوِّن على الشاشة. سنقوم بما يلي:
تهيئة
loading،error، وdataولاية.تشغيل عملية الجلب
useEffect(لذلك يتم تشغيله بعد العرض الأول). ...