React.useState प्रॉप्स से स्थिति को पुनः लोड नहीं करता है

Question

मैं राज्य बदलने की उम्मीद कर रहा हूं कि प्रॉप्स परिवर्तन पर फिर से लोड करना है, लेकिन यह काम नहीं करता है और userअगले useStateकॉल पर चर को अपडेट नहीं किया जाता है, क्या गलत है?

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

codepen

Answer 1

यूज़ करने के लिए दिया गया तर्क प्रारंभिक अवस्था है जैसे कि क्लास कंपोनेंट के लिए कंस्ट्रक्टर में स्टेट सेट करना और स्टेट को रेंडर करने के लिए अपडेट करने के लिए उपयोग नहीं किया जाता है।

यदि आप प्रोप परिवर्तन पर स्थिति को अपडेट करना चाहते हैं, तो useEffectहुक का उपयोग करें

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

वर्किंग डेमो

Comments

कंस्ट्रक्टर में प्रारंभिक स्थिति सेट करते समय, यह समझने के लिए कि कंस्ट्रक्टर को एक बार क्लास उदाहरण निर्माण पर बुलाया जाता है। हुक के साथ ऐसा लगता है कि हर बार फंक्शन कॉल पर उपयोग किया जाता है और हर बार इसे स्टेट को इनिशियलाइज़ करना चाहिए, लेकिन कुछ अस्पष्टीकृत "जादू" होते हैं।

— जीवन रक्षा

हो सकता है कि यह पोस्ट इस पर कुछ प्रकाश

— डालती है

यदि आपको प्रॉप्स को राज्य में मर्ज करने की आवश्यकता है, तो आप एक अनंत लूप में फंस जाते हैं जब आप क्रिएट-रिएक्शन-ऐप का उपयोग करते हैं, जिसके लिए राज्य निर्भरता सरणी में होना चाहिए

— user210757

यह प्रारंभिक अवस्था को दो बार सेट करता है जो कि बहुत कष्टप्रद है। मुझे आश्चर्य है कि यदि आप प्रारंभिक अवस्था को शून्य करने के लिए सेट कर सकते हैं और फिर React.useEffectप्रत्येक समय प्रारंभिक अवस्था को सेट करने के लिए उपयोग कर सकते हैं।

— CMCDragonkai 5

यह काम नहीं करता है अगर राज्य भी प्रतिपादन को नियंत्रित कर रहा है। मेरे पास एक कार्यात्मक घटक है जो राज्य के आधार पर सहारा और रेंडर के आधार पर प्रस्तुत करता है। यदि राज्य घटक को प्रस्तुत करने के लिए कहता है क्योंकि यह बदल गया है, तो उपयोग चलता है और डिफ़ॉल्ट मान पर वापस चलता है। यह वास्तव में उनकी ओर से खराब डिजाइन है।

— ग्रेग वेर्स

Answer 2

कार्यात्मक घटक जहां हम useStateअपने वैरिएबल पर प्रारंभिक मान सेट करने के लिए उपयोग करते हैं, अगर हम प्रॉप्स के माध्यम से प्रारंभिक मान पास करते हैं, तो यह हमेशा एक ही प्रारंभिक मान सेट करेगा जब तक आप useEffectहुक का उपयोग नहीं करते हैं ,

उदाहरण के लिए आपका मामला यह आपका काम करेगा

 React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

उपयोग करने के लिए पारित फ़ंक्शन स्क्रीन पर रेंडर करने के बाद प्रतिबद्ध चलेगा।

डिफ़ॉल्ट रूप से, प्रभाव हर पूर्ण रेंडर के बाद चलते हैं, लेकिन आप उन्हें फायर करना चुन सकते हैं जब कुछ मान बदल गए हों।

React.useEffect(FunctionYouWantToRunAfterEveryRender)

यदि आप उपयोग करने के लिए केवल एक तर्क पास करते हैं तो यह इस पद्धति को चलाएंगे कि हर रेंडर के बाद आप यह तय कर सकते हैं कि कब उपयोग करने के लिए FunctionYouWantToRunAfterEveryRenderदूसरा तर्क पारित करके इसे आग दें

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

जैसा कि आप नोटिस करते हैं कि मैं [props.user] गुजर रहा हूं अब useEffectकेवल इस FunctionYouWantToRunAfterEveryRenderफ़ंक्शन props.userको बदल दिया जाएगा

मुझे आशा है कि यह आपकी समझ में मदद करता है मुझे बताएं कि क्या कोई सुधार आवश्यक है धन्यवाद

Answer 3

पास किया गया पैरामीटर React.useState()उस राज्य के लिए केवल प्रारंभिक मूल्य है। प्रतिक्रिया यह पहचानने वाली नहीं है कि राज्य को बदलने के लिए, केवल इसका डिफ़ॉल्ट मान सेट करना है। आप शुरू में डिफ़ॉल्ट स्थिति सेट करना चाहते हैं, और फिर सशर्त कॉल setUser(newValue)करेंगे, जिसे नए राज्य के रूप में मान्यता दी जाएगी, और घटक को फिर से प्रस्तुत करना होगा।

मैं किसी भी तरह की स्थिति के बिना इसे लगातार अपडेट करने से रोकने के लिए सावधानीपूर्वक अद्यतन करने की स्थिति की सिफारिश करूंगा, और इसलिए हर समय सहारा फिर से प्रदान किया जाता है। आप एक मूल घटक के लिए राज्य कार्यक्षमता को फहराने पर विचार कर सकते हैं और माता-पिता की स्थिति को इस अवतार को एक प्रस्ताव के रूप में पारित कर सकते हैं।

Answer 4

ReactJS प्रलेखन के अनुसार हुक के बारे में :

लेकिन क्या होगा अगर स्क्रीन पर घटक होने के दौरान दोस्त बदल जाए? हमारा घटक एक अलग मित्र की ऑनलाइन स्थिति प्रदर्शित करता रहेगा। यह एक बग है। जब कोई अनसब्सक्राइब कॉल गलत दोस्त आईडी का उपयोग करेगा, तो हम अनमाउंटिंग के बाद भी मेमोरी लीक या क्रैश का कारण बनेंगे।

यहां आपकी एकमात्र बातचीत एक प्रॉपर बदलाव पर होनी चाहिए, जो काम नहीं करता है। आप (अभी भी डॉक्टर के अनुसार) एक घटक का उपयोग कर सकते हैं (proProps) propsively props को किसी भी अद्यतन को पकड़ने के लिए।

पुनश्च: मेरे पास जज करने के लिए पर्याप्त कोड नहीं है, लेकिन क्या आप अपने अवतार (प्रॉप्स) फंक्शन के अंदर सक्रिय रूप से सेटअप () नहीं कर सकते?

Answer 5

प्रतिक्रिया दुनिया में, आपको ऐसे मामलों में अपने राज्य को अपडेट करना चाहिएWillRecieveProps (nextProps) फ़ंक्शन।

Comments

जो अब प्रतिक्रिया के नवीनतम संस्करणों के लिए सही नहीं है

— शुभम खत्री