मैं प्रतिक्रिया करने के लिए नया हूँ। मैं सीखने के लिए एक प्रोजेक्ट विकसित कर रहा हूं लेकिन मुझे useEffect हुक के उपयोग में समस्या आ रही है।

Dashboard component में मैं एक नोडज एपीआई को कॉल करता हूं जो उदाहरण के रूप में उपयोगकर्ताओं की एक सूची देता है:

Users : [{
    "name": "john",
    "age": 30
}, ... ]

मैं जो करना चाहता हूं वह यह है कि उम्र सूची को age component और नाम सूची को name component में पास कर दिया जाए ताकि शो सूची और चार्ट जैसे कुछ ऑपरेशन किए जा सकें।

अभी मैंने पैरेंट कंपोनेंट (डैशबोर्ड कंपोनेंट) के अंदर कॉल किया, अलग-अलग एरेज़ को प्रॉप्स के जरिए चाइल्ड कंपोनेंट्स (आयु और नाम कंपोनेंट) में पास किया।

समस्या, मुझे लगता है कि प्रतिक्रिया और जावास्क्रिप्ट की अतुल्यकालिक प्रकृति के कारण, बच्चे के घटकों को एपीआई कॉल के अंत से पहले आरोहित किया जाता है जिससे त्रुटियां होती हैं

मैं सोच रहा था कि इस तरह के मामले में उपयोग करने का सबसे अच्छा अभ्यास क्या है।

  • क्या मूल घटक में एपीआई को कॉल करना और फिर घटकों के बीच डेटा को सॉर्ट करना ठीक है? इस मामले में मुझे बाल घटकों के लोड होने की प्रतीक्षा करने के बारे में कैसे जाना चाहिए?
  • या क्या मुझे प्रत्येक बच्चे के घटक के भीतर दो अलग-अलग कॉल करनी चाहिए? क्या इससे प्रदर्शन पर असर पड़ेगा?

कोड उदाहरण

डैशबोर्ड घटक

const [users, setUsers] = useState([])

    useEffect(()=>{
        //api call and update users state
        }, [])

        //process users and create array of names and ages

    return (
        <Age names={names} />
        <Name ages={ages} />
    )

नाम घटक

export default function Name(props) {
        return (
            props.names.map(name => {
                <p>{name}</p>
            })
        )
    }

सलाह और मदद के लिए अग्रिम धन्यवाद।

1
Andrea Troccolo 27 जिंदा 2021, 11:31
क्या आप कृपया अपने घटकों का स्रोत दिखा सकते हैं? माता-पिता में एक एपीआई को कॉल करना, परिणाम के साथ राज्य स्थापित करना और डेटा को प्रॉप्स में वितरित करना कोई समस्या नहीं होनी चाहिए।
 – 
Yidaotus
27 जिंदा 2021, 11:36
1
आपको राज्य को एक पूर्वज घटक तक उठाना चाहिए जहां यह समझ में आता है। यदि Age घटक नाम स्थिति की परवाह नहीं करता है और Name घटक आयु स्थिति की परवाह नहीं करता है, तो प्रत्येक के लिए अपनी स्थिति बनाए रखना तर्कसंगत लगता है। लेकिन राज्य को मूल घटक में रखना और सहारा के रूप में पास करना भी ठीक है। ऐसा लगता है कि आपके बच्चे घटक लापता/अपूर्ण डेटा को संभाल नहीं पाते हैं जो अभी तक प्राप्त नहीं हुआ है, आपको इसके खिलाफ सावधान रहना चाहिए, आमतौर पर कुछ सशर्त प्रतिपादन के साथ। MCVE
 – 
Drew Reese
27 जिंदा 2021, 11:37
मुझे लगता है कि शायद यह समाधान है, उदाहरण के लिए डेटा उपलब्ध होने तक एक स्पिनर दिखाने के लिए आपका मतलब है? उदाहरण के लिए मैं उम्र की सूची के माध्यम से और फिर घटक प्रक्रिया में एक चार्ट से गुजरता हूं। जब तक कोई डेटा नहीं है मुझे स्पिनर दिखाना चाहिए? लेकिन जब डेटा लौटाया जाता है, और मैं मूल घटक की स्थिति को अद्यतन करता हूं, तो क्या बाल घटक अपडेट हो जाते हैं?
 – 
Andrea Troccolo
27 जिंदा 2021, 11:42
यदि माता-पिता पुन: प्रस्तुत करते हैं, तो बच्चे भी करते हैं। यदि बच्चों के लिए पारित सहारा बदल जाता है, तो बच्चे फिर से प्रस्तुत करेंगे। क्या आप यही पूछ रहे हैं?
 – 
Drew Reese
27 जिंदा 2021, 11:52
1
हाँ मेरा संदेह यह है। हालांकि मैंने सशर्त प्रतिपादन लागू किया और ऐसा लगता है कि यह काम कर रहा है। धन्यवाद!
 – 
Andrea Troccolo
27 जिंदा 2021, 12:04

1 उत्तर

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

चूंकि users राज्य का एक "खंड" प्रतीत होता है, एक सरणी जिसमें age और name संपत्ति दोनों के साथ ऑब्जेक्ट होते हैं, तो मूल घटक को की आवश्यकता होगी राज्य धारण करने के लिए। किसी भी राज्य को अपडेट करने के लिए पैरेंट से सिंगल एपीआई/एसिंक्रोनस कॉल करें।

आप बच्चे के घटकों के लिए सहारा के रूप में पारित होने के लिए राज्य को दो सरणियों में "मानचित्र"/"फ़िल्टर" कर सकते हैं। जब आप प्रोप पास करते हैं तो यह "ऑन-द-फ्लाई" किया जा सकता है। जब माता-पिता का राज्य अद्यतन करता है तो बच्चों को नवीनतम राज्य मान पास कर दिए जाएंगे।

const [users, setUsers] = useState([])

useEffect(()=>{
  //api call and update users state
}, [])

return (
  <>
    <Age names={users.map(({ name }) => name)} />
    <Name ages={users.map(({ age }) => age)} />
  </>
)

प्रत्येक बच्चा अपने प्राप्त सरणी को हमेशा की तरह मैप कर सकता है। array.prototype.map बिना किसी समस्या के एक खाली सरणी को संभाल सकता है, इसलिए प्रारंभिक/खाली स्थिति (जब तक आप नहीं चाहते) को संभालने के लिए आपको कुछ खास करने की आवश्यकता नहीं है। जब तक माता-पिता में users स्थिति एक परिभाषित सरणी है, array.map को एक सरणी वापस करने की गारंटी है।

export default function Name({ names }) {
  return names.length ? names.map(name => <p>{name}</p>) : "...Loading";
}
1
Drew Reese 27 जिंदा 2021, 13:41