( ريأكت ناتيف )ما الخطأ فى هذا الكود أريد جعل هذا spinner يدور عند التحميل ويقف بعد التحميل

بتاريخ 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))
}

في جافاسكربت يتم التعامل مع العمليات 
الغير متزامنة مثل طلب البيانات من السيرفر 
في حالتك في دالة 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)
        )
  //...
}

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

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

;(setLoading(false

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

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

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

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

;(setLoading(false

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

 

 

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

بتاريخ 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>

أخ أحمد.

الخطأ الذي تواجهه هو أن جافاسكربت مختلفة عن 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