दिलचस्प पोस्ट
आरएसपीसी का उपयोग करते हुए JSON प्रतिक्रिया की जांच कैसे करें? स्ट्रिंग के अंतिम चरित्र को कैसे प्राप्त करना है? उपयोगकर्ता स्क्रॉलिंग के आधार पर वेब पेज की सामग्री को कैसे लोड करें nth-of-type vs nth-child लुसेन में क्वेरी स्वत: पूर्णता / सुझाव कैसे करें? कैसे MaxUploadSizeExceededException को नियंत्रित करने के लिए एक वस्तु सरणी की गहरी प्रतिलिपि क्या स्पष्ट टाइमआउट और साफ अंतराल एक ही है? कैसे PostgreSQL उपयोगकर्ता पासवर्ड बदलने के लिए? क्या मुझे एक जावास्क्रिप्ट ऑब्जेक्ट प्रॉपर्टी नाम मिलता है जो किसी संख्या से शुरू होता है? एक्सएसडी से जेएसीएबी कक्षाएं कैसे उत्पन्न करें? Event.preventDefault () का उपयोग करने के बाद ईवेंट को ट्रिगर कैसे करें IPhone पर बेस64 एन्कोडिंग कैसे करें I समूहों की चर संख्या के साथ नियमित अभिव्यक्ति? डोम प्रसंस्करण के बाद एक्सएमएल गुणों का क्रम

प्रतिक्रिया में नेस्टेड राज्य कैसे सेट करें

मैं इस तरह नेस्टेड संपत्ति करके अपने राज्य को व्यवस्थित करने की कोशिश करता हूं

this.state = { someProperty: { flag:true } } 

तो मैंने अपने राज्य को अपडेट करने की कोशिश की

 this.setState({someProperty.flag: false}); 

यह इस तरह से काम नहीं करता है

Solutions Collecting From Web of "प्रतिक्रिया में नेस्टेड राज्य कैसे सेट करें"

सेट करने के लिए नेस्टेड ऑब्जेक्ट के लिए आप नीचे दिए गए दृष्टिकोण का पालन कर सकते हैं जैसा कि मुझे लगता है कि सेटस्टेट नेस्टेड अपडेट्स को संभाल नहीं करता है

 var someProperty = {...this.state.someProperty} somePrperty.flag = true; this.setState({someProperty}) 

विचार एक डमी ऑब्जेक्ट बनाने के लिए उस पर आपरेशन करता है और फिर अद्यतन वस्तु के साथ राज्य की जगह

अब स्प्रेड ऑपरेटर ऑब्जेक्ट की केवल एक लेवल नेस्टेड कॉपी बनाता है। यदि आपका राज्य अत्यधिक नेस्टेड की तरह है

 this.state = { someProperty: { someOtherProperty: { anotherProperty: { flag: true } .. } ... } ... } 

आप प्रत्येक स्तर पर स्प्रेड ऑपरेटर का इस्तेमाल करते हुए स्टेटस सेट कर सकते हैं

 this.setState(prevState => ({ ...prevState, someProperty: { ...prevState.someProperty, someOtherProperty: { ...prevState.someProperty.someOtherProperty, anotherProperty: { ...prevState.someProperty.someOtherProperty.anotherProperty, flag: false } } } })) 

हालांकि उपरोक्त सिंटैक्स हर बदसूरत हो जाता है क्योंकि राज्य अधिक से अधिक नेस्टेड हो जाता है और इसलिए मैं आपको राज्य को अद्यतन करने के लिए immutability-helper पैकेज का उपयोग करने की सलाह देता हूं।

immutability helper साथ स्थिति को अपडेट करने के तरीके पर यह उत्तर देखें।

पैकेज अपरिवर्तनीयता-सहायक का उपयोग करना:

 import update from 'immutability-helper'; const newState = update(this.state, { someProperty: {flag: {$set: false}} }; this.setState(newState); 

इसे एक पंक्ति में लिखना

 this.setState({ someProperty: { ...this.state.someProperty, flag: false} }); 

यदि आप ES2015 का प्रयोग कर रहे हैं तो आपको ऑब्जेक्ट तक पहुंच है। नेस्टेड ऑब्जेक्ट को अपडेट करने के लिए आप इसका उपयोग कर सकते हैं।

 this.setState({ someProperty: Object.assign(this.state.someProperty, {flag: false}) }); 

आप मौजूदा के साथ अद्यतित गुणों को मर्ज करते हैं और स्थिति को अपडेट करने के लिए लौटा हुआ ऑब्जेक्ट का उपयोग करते हैं।

इस धागा में दिए गए पहले उत्तर पर भिन्नता है जो किसी भी अतिरिक्त पैकेज, पुस्तकालयों या विशेष कार्यों की आवश्यकता नहीं है।

 state = { someProperty: { flag: 'string' } } handleChange = (value) => { const newState = {...this.state.someProperty, flag: value} this.setState({ someProperty: newState }) } 

एक विशिष्ट नेस्टेड फ़ील्ड की स्थिति निर्धारित करने के लिए, आपने संपूर्ण ऑब्जेक्ट को सेट किया है। मैंने इसे एक वैरिएबल, newState और मौजूदा राज्य की सामग्री को पहले इसे ईएस2015 फैल ऑपरेटर का उपयोग करते हुए प्रसारित किया । उसके बाद, मैंने इस मूल्य के स्थान को बदल दिया। this.state.flag को नए मान के साथ (जब से मैं flag: value निर्धारित करता हूं flag: value बाद मैं वर्तमान स्थिति को वस्तु में फैला देता हूं, वर्तमान स्थिति में flag क्षेत्र ओवरराइड किया जाता है)। फिर, मैं बस कुछ someProperty को मेरी newState ऑब्जेक्ट पर सेट कर रहा हूं।