اذهب إلى المحتوى

السؤال

نشر

انا قمت بعمل تطبيق للأخبار وقمت بعمل fetch data  عن طريق axios  لكنى لم استخدم async , await

و أنا أريد جعل هذا spinner يدور عند التحميل ويقف بعد التحميل .. 

ما المفترض ان افعل فى هذا الكود التالى ؟؟؟ او ما هو المكان المناسب المفروض اضع فيه setlaoding (true )

 

5f9696cb0e173_.thumb.png.671f973f20e8270facf510479c744d0a.png5f9696cd02939_.thumb.png.f0e645cc21542bb6be336af44730f8a0.png

Recommended Posts

  • 0
نشر
بتاريخ منذ ساعة مضت قال Yomna Raouf:

هنا نحن نحتاج لإيقاف ال spinner بعد أن يتم تحميل البيانات.

إذا من المفترض أن نقوم باستخدام 

;(setLoading(false

في نهاية الدالة ()getNews 

 

 

جربتها ولم تنجح 

  • 0
نشر
بتاريخ 1 ساعة قال Ahmed Sawy:

جربتها ولم تنجح 

هل يمكنك أن تحذف السطر الأول و الأخير الموجود في  useEffect :

setLoading(true)
// و 
setLoading(false);

ثم نقوم بتعديل getNews لتصبح كما يلي:

// or 

cost getNews = () => {

  if (!News.length) {
    
    setLoading(true)
    // fetch code
    
  } else {
    
     setLoading(false)
    
  }
}

 

يوجد حل آخر أيضًا.

سنقوم بالاستغناء عن جملة useState الخاصة ب loading تمامًا ، ثمً:

<View>
  
  { !news.length ? (
   		<ActivityIndicator animating={true} />
   ): (
     < FlatList />
   )}
  
</View>

 

  • 1
نشر
بتاريخ 10 دقائق مضت قال Ahmed Sawy:

جربتها ولم تنجح 

مرحباً محمد: 
قم بعمل الآتي
 

axios
	.get('url')
	.then(res => /* الكود الذي تريد كتابته في حالة النجاح  */)
    .catch(error => /* الكود الذي تريد كتابته في حالة الفشل */)
	.finally(() => /* الكود الذي تريد كتابته في حالة النجاح أو الفشل */)
             
             
// اكتب بداخل finally
             
function getNews() {
	// قم بتشغيل التحميل
	setLoading(true);
  	
    axios
        .get('url')
        .then(res => /* الكود الذي تريد كتابته في حالة النجاح  */)
        .catch(error => /* الكود الذي تريد كتابته في حالة الفشل */)
        .finally(() => setLoading(false))
}

 

  • 0
نشر (معدل)

أخ أحمد.

الخطأ الذي تواجهه هو أن جافاسكربت مختلفة عن php

في php لا يمر إلى الأمر الثاني قبل أن يكتمل الأول

في جافاسكربت يتم المرور الى الأمر الثاني سواء إكتمل الامر الأول أو لم يكتمل.

حل خطئك هو

useEffect(()=> {
  getNews()
},[])

function getNews() {
	
	setLoading(true)
  	
    Germany.get(...)
        .then(function (response) {// لا تحتاج async هنا
      setNews(response.data)
      setLoading(false) // أو وضعها في .finally()
    })
        .catch(
        //...
          setLoading(false) //أو وضعها في .finally()
          alert(error)
        )
  //...
}

 

المزيد عن دوال .then و .catch

تم التعديل في بواسطة رضوان نسيم
  • 1
نشر

في جافاسكربت يتم التعامل مع العمليات 
الغير متزامنة مثل طلب البيانات من السيرفر 
في حالتك في دالة getNews() بتخطيها و تفيذ الكود 
الذي تحته ثم يتم تنفيذ دالة getNews() بعد ان يكتمل

يمكن القراء اكثر عن ال event loop في الجافاسكربت لفهم هذا بشكل افضل

 

في حالتك سوف يتم تفيذ
  setLoading(true) // يتم تفيذهذا اولا 
  setLoading(false)// ثم هذا ثانيا
  getNews() // اخيرا يتم تفيذ هذا الداله لانها تحتاج الي بعض الوقت حتي تكتمل


// جرب هذا

useEffect(()=> {
  setLoading(true)// هنا
  getNews()
},[])

function getNews() {
	
  	
    Germany.get(...)
        .then(function (response) {
      setNews(response.data)
      setLoading(false) //هنا
    })
        .catch(
        //...
          alert(error)
        )
  //...
}

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...