मैं अपने प्रतिक्रिया घटक से दूरस्थ डेटा ला रहा हूँ। जब डेटा तैयार होता है, तो चाइल्ड कंपोनेंट्स रेंडर किए जाते हैं। जबकि डेटा लोड हो रहा है, 'डेटा लोड हो रहा है ....' टेक्स्ट प्रदर्शित होता है।

जब घटक को दूसरी बार props परिवर्तन के कारण रेंडर किया जाता है, तो मैं पिछला डेटा null पर सेट करता हूं ताकि यह दिखाया जा सके कि नया डेटा लोड हो रहा है।

const List = (props) => {
  const [items, setItems] = useState(null);

  useEffect(() => {  
    setItems(null);

    fetch(`http://some_url_to_fetch_items.com?PAGE=${props.page}`)
    .then((data) => {
       setItems(data);
    })   
  }, [props.page]);

  if (!items) {
    return "Data is loading ......."
  }

  return (
    <ul>
      {items.map(item => (
        <li>{item}</li>
      ))}
    </ul>
  )
}

इस दृष्टिकोण की समस्या यह है कि जब घटक को दूसरी बार प्रस्तुत किया जाता है तो setItems(null); कोड तुरंत निष्पादित नहीं होता है (शायद इसलिए कि useEffect को अतुल्यकालिक रूप से निष्पादित किया जाता है) और घटक अपेक्षा के बजाय 3 बार फिर से प्रस्तुत करता है 2:

  • प्रॉप्स बदलने के कारण 1-सेंट री-रेंडर (लेकिन पुराने डेटा के साथ, चूंकि setItems(null) बहुत देर से निष्पादित होता है)
  • setItems(null) के अंत में निष्पादित होने के बाद दूसरा पुन: प्रस्तुत करना
  • डेटा प्राप्त होने के बाद तीसरा पुन: प्रस्तुत करना

मैं समझता हूं कि मेरे दृष्टिकोण में समस्या क्या है। लेकिन मुझे दूसरा रास्ता नहीं दिख रहा है। हुक का उपयोग करना अनिवार्य है।

कोई विचार?

0
chumakoff 4 फरवरी 2020, 21:47

2 जवाब

सबसे बढ़िया उत्तर

आपकी सूची में एक प्रमुख प्रोप जोड़ने के लिए एक त्वरित सुधार होगा:

<List key={page} page={page} />

जब पृष्ठ का मान बदलता है, तो सूची घटक अनमाउंट किया जाएगा, और एक नया रेंडर किया जाएगा। नए में कोई पिछला डेटा नहीं होगा, इसलिए आपको 3 के बजाय केवल 2 रेंडर मिलेंगे।

इसका मतलब है कि अब आपको पिछला डेटा null पर सेट करने की ज़रूरत नहीं है।

यदि आप ऐसा करते हैं, तो आपको setItems को कॉल करने से पहले यह जांचना होगा कि घटक अभी भी आपके useEffect में आरोहित है, अन्यथा आप एक अनमाउंट किए गए घटक पर स्थिति सेट करने का प्रयास करेंगे। आप लिख सकते हो:

if(setItems) {
  setItems(data)
}

कुंजी प्रोप को बदलना हालांकि थोड़ा हैकी है, इसलिए मैं आपकी समस्या को हल करने के अन्य तरीकों की जांच करूंगा।

हो सकता है कि आपको डेटा लाने के लिए ज़िम्मेदार सूची के बजाय डेटा को सूची में पास करना चाहिए, और पृष्ठ स्थिति और डेटा दोनों मूल घटक के अंदर हों?

हालांकि अभी के लिए, पेज का उपयोग करके कुंजी बदलना काम करना चाहिए।

1
JMadelaine 6 फरवरी 2020, 10:24
use this method  : 

  useEffect(() => {  
       fetch(`http://some_url_to_fetch_items.com?PAGE=${props.page}`)
        .then((data) => {
           setItems(data);
        })   
      }, []);

     return (
        <ul>
          {items? items.map(item => (
            <li key={item.id}>{item}</li>
          )):"Data is Loading..."}
        </ul>
      )
0
Shahnad 6 फरवरी 2020, 11:54