لمن يفهم في React JS وجلب البيانات من APIs
باختصار عند وضعي طلب fetch لجلب بيانات من ال api ويكون هذا الطلب داخل دالة المكون وبعد جلب الطلب يحدث الحالة ويجعل قيمتها =قيمة الطلب.
المشكلة هي أنه يكون هناك طلب لامتناهي على السيرفر. مثلا في دالة الرد على الطلب من جهه السيرفر من ضمن التعليمات البرمجية أن يطبع في الطرفية عبارة 'طلب' بعد استقبال كل طلب والرد عليه.
ولكن وبعد تحديثي للصفحه على الويب وتحميل المكونات يكون الطلب مستمر بعبارة أخرى مئات الطلبات الآتي لا تتوقف.
مع العلم اني وضعت عبارة if فأصبح الطلب يكرر 4 مرات وجربت الطريقة الرسمية ووضعت الطلب في دالة useEfect ويتكرر الطلب مرتين ولكن احيانا لا يتوقف وتستمر نفس المشكلة. هل استخدام class بدل الدوال يحل المشكلة.
مع اني حليتها بوضع الطلب في متغير ثابت وليس كقيمة لحالة.
اعرف ان هذه الطريقة تعدم جزء أساسي من فكرة الرياكت ولكن ماهي راضيه تفهم ,^•^
الاسئلة:
1- مالضير في جعلي قيمة الطلب في متغير خارج دالة المكون بدل الحالة إذا الامور ماشيه ?!
2- ماهي افضل طريقة لجلب البيانات وتخزينها باستخدام react
3- ماهي وسيلة منع تكرار الطلب من جهة الخادم بحيث لو أتى شخص متذاكي وعمل loop req على APIs الخاصة بي?
التعليقات
ضع الكود هنا لكي نتمكن من فهم المشكلة. و مساعدتك
جرب هذا لمشاركة الكود :
او اتبع هذا
لكتابة هوك لجلب البيانات من السيرفر
سؤال اخر:
لنفترض أن ملف المستخدم فيه عدة مكونات react لعرض البيانات ولكل مكون جدول يأخذ منه في قاعدة البيانات.
وبعض الملفات لايوجد بها بعض المكونات لأنها اختياريه.
السؤال ماهو الافضل: ان يكون لكل مكون طلب fetch لجلب البيانات الخاصة به.
أو أن يكون هناك طلب جلب واحد لجميع بيانات المكونات عند تحميل صفحه ملف المستخدم؟
أنا اميل مبدأيا للطريقة الثانية ميزتها تخفف الطلبات على السيرفر.
ولكن هل للطريقة الأولى ميزات غير سهوله الكود؟
وهل توصي رياكت بشئ في هذه الحالة؟
وجدت الحل في توثيق رياكت وكذلك وجدته في الموقع الذي طرحته شكرا لك.
المشكلة اني في البداية كتبت كود useEfect بيدي ونسيت اضع في نهاية الدالة ( [] , {
فإذا حذفت [], صار هناك تكرار مستمر
وحسب ما قرأت هي ضرورية في حال استخدمت طلب API داخل useEfect
ال [] في useEfect هي dependence array
اذا وضعتها فارغة فإنها تعمل مع الريندر الاول مرة واحدة
اما اذا وضعت متغيرات بها، فمع تبديل المتغير تستدعى الدالة، تستخدمها مثلا لو كان لديك dropdown list و تريد ان تقوم بجلب البيانات حسب الإختيار فتقوم بوضع المتغير داخل ال []
اما اذا حذفتها فإنك تقول للريأكت قم بإستدعاء الدالة مع كل ريندر