रिले का उपयोग कर नेस्टेड फॉर्म घटक यूआई में कहां रहना चाहिए?

Question

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

जिस समस्या में मैं दौड़ रहा हूं वह यह है कि मुझे यकीन नहीं है कि मेरे पास बच्चे के घटकों के लिए राज्य कहां होना चाहिए। कोई फर्क नहीं पड़ता कि, ऐसा लगता है कि उनके लिए राज्य माता-पिता में होना होगा ताकि इसमें यह हो और इसमें इनपुट ऑब्जेक्ट में शामिल हो सके जो इसे निष्पादित करता है जब यह इसे निष्पादित करता है। हालांकि, ये मुझे दो स्थानों में से एक में छोड़ देता है, न तो आदर्श लगता है:

1. केवल माता-पिता में बाल घटकों द्वारा संपादित मूल्यों की स्थिति को संग्रहीत करें।
   • समस्या: रिले एक चेतावनी फेंकता है, क्योंकि मैं एक बच्चे के रिलेकंटनर को एक राज्य वस्तु पारित कर रहा हूं, जब यह अपेक्षा करता है कि यह रिले द्वारा लाया गया टुकड़ा हो। आप this playground में इस चेतावनी और इस व्यवहार का एक उदाहरण देख सकते हैं। यहां एक विशिष्ट चेतावनी दी गई है जिसका मैं उल्लेख कर रहा हूं कि आप बच्चे के घटक में फ़ील्ड को संपादित करते समय देखते हैं।

     चेतावनी: रिलेकंटनर: अपेक्षित प्रो details[object Object] को रिले द्वारा प्राप्त डेटा के लिए आपूर्ति की गई। यह तब तक एक त्रुटि है जब तक कि आप जानबूझकर नकली डेटा में गुजर रहे हैं जो इस घटक के टुकड़े के आकार के अनुरूप है।

2. बच्चे घटकों ने अपने राज्य को बनाए रखने के चलो, लेकिन फिर भी इतना है कि यह उन्हें बचाने कार्रवाई से निपटने और उत्परिवर्तन प्रदर्शन के प्रयोजनों के लिए है माता पिता के लिए मूल्यों संवाद।
   • समस्या: राज्य का डुप्लिकेशन। यद्यपि माता-पिता में जो राज्य है, वह उत्परिवर्तन करने के प्रयोजनों के लिए पूरी तरह से रखा जा रहा है, लेकिन वहां ऐसा करने में काफी गलत लगता है और माता-पिता के लिए अनावश्यक renders का कारण बन जाएगा। आप इस other playground में इस बदलाव का एक उदाहरण देख सकते हैं।

उम्मीद है कि इस स्थिति को संभालने के लिए एक स्पष्ट पसंदीदा तरीका है, लेकिन मेरे से चारों ओर खोज और रिले के साथ खेल रहा है इसका पता लगाना नहीं कर पाए हैं।

Answer 1

पहली चीजें पहले। बहुत अच्छी तरह से लिखित सवाल। धन्यवाद :-)

आम में इस्तेमाल पैटर्न प्रतिक्रिया और रिले दुनिया है कि हम एक माता पिता के घटक है जो एक पतली दृश्य नियंत्रक में कार्य करता है, रिले का उपयोग कर डेटा को हासिल करेगा और विभिन्न बच्चे घटक के लिए अपनी state के props के रूप में अलग-अलग हिस्सों से गुजरता है जैसा आवश्यक हो। बच्चे के घटक, जो props के रूप में डेटा प्राप्त करते हैं, आमतौर पर गूंगा होते हैं और केवल पास डेटा प्रदर्शित करते हैं।

आपके मामले में, ChildComponent स्वयं ही डेटा संपादित करता है। इसे अपने मूल घटक HelloApp से प्रारंभिक details डेटा प्राप्त होता है। हालांकि, जब हम यूआई में details फ़ील्ड में से किसी एक को संपादित करते हैं, तो Relay द्वारा प्राप्त किए गए मान और यूआई में मौजूद मेल नहीं खाते हैं। बाल घटक के लिए रिले कंटेनर बनाने के दौरान, अगर हम टुकड़े और खेतों को शामिल करते हैं, तो हम घोषणा करते हैं कि उन डेटा रिले द्वारा लाए जाएंगे।अब, अगर हम खुद को बाल घटकों के डेटा (प्रोप) को संशोधित करना चाहते हैं, तो हम रिले कंटेनर में उस टुकड़े को छोड़ दें।props मूल घटक द्वारा पारित किया जाएगा केवल बच्चे घटक के initialState के लिए उपयोग किया जाएगा।

आवश्यक परिवर्तन HelloApp कंटेनर में हैं। details के खेतों को बच्चे से माता-पिता में स्थानांतरित कर दिया गया है।

HelloApp = Relay.createContainer(HelloApp, { 
    fragments: { 
    person:() => Relay.QL` 
     fragment on Person { 
     name, 
     details { 
      hairColor, 
      nickName 
     } 
     } 
    `, 
    } 
}); 

लेकिन मैं अभी भी ऊपर समाधान के साथ असहज महसूस करते हैं। क्योंकि यह स्पष्ट रूप से दिखाता है कि, माता-पिता को details के क्षेत्रों को जानना है, जो वास्तव में बाल घटकों में उपयोग किए जाते हैं।