react.js में अपरिभाषित प्रोप से निपटने का सबसे अच्छा तरीका क्या है?

Question

मान लीजिए कि मेरे पास एक ऐसी क्रिया है जो index.js फ़ाइल में, पेज लोड पर प्रेषित हो जाती है।

उदाहरण

store.dispatch(loadData()); 

मेरी कम करने में मैंने किसी चीज़ को करने के लिए राज्य को प्रारंभ। इस

function myReducer(state = {}, action) 

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

{this.props.object.key.map(k => do something)} 

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

एक और दृष्टिकोण, परिभाषित करना है कि आपका राज्य रेड्यूसर में कैसा दिखता है। दूसरे शब्दों में, अगर मुझे पता है कि मेरा राज्य उस पर एक सरणी संपत्ति के साथ एक वस्तु होगी, तो मैं ऐसा कुछ कर सकता हूं।

const initialState = { 
    key:[] 
} 

function myReducer(state = initialState, action) 

ऐसा करने से इस तथ्य को फायदा होगा कि अब मुझे जांच की आवश्यकता नहीं होगी क्योंकि कुंजी कभी अपरिभाषित नहीं है।

मेरे प्रश्न हैं; क्या इनमें से कोई भी दृष्टिकोण दूसरे की तुलना में बेहतर है? या शायद, इस से निपटने के लिए पूरी तरह से एक और तरीका है?

Answer 1

आम तौर पर, जिस दृष्टिकोण को मैं लेना चाहता हूं वह उस घटक पर डिफ़ॉल्ट प्रोप को परिभाषित करना है जिसमें "खाली" का अर्थपूर्ण अर्थ है।

class MyComponent extends React.Component { 
    static defaultProps = { 
     object: { 
      key: [] 
     } 
    }; 

    ... 

    method() { 
     // this.props.object.key is an empty array, but is overriden 
     // with a value later after completion of the reducer 
     // (trigerred asynchronously) 
     this.props.object.key.map(doSomething); 
    } 
} 

यह अपेक्षाकृत साफ है रन टाइम पर फेंकने से कोड रोकता है, और आप बनाना बलों: उदाहरण के लिए, इस मुद्दे के संदर्भ में आप मैं आम तौर पर इस (ES6 कक्षाएं शैली) की तरह मेरे घटक संरचना का वर्णन अर्थात् शून्य, खाली, या अपरिभाषित इनपुट राज्यों के लिए अच्छी तरह से परिभाषित व्यवहार।