2014-09-25 9 views
5

के बाद मैं एक घटक है कि प्रारंभिक अवस्था के साथ भरी हुई किया जा रहा है प्रतिक्रिया को रोकना:प्रस्तुत जब तक अनुरोध

getInitialState: function() { 
    return { 
     panel: "deals", 
     showExtension: false, 
     person: {} 

    }; 
    }, 

और मैं इस एक व्यक्ति को खोजने के लिए:

componentDidMount: function() { 
    this.findPersonFromBackground(); 
    }, 
    findPersonFromBackground: function() { 
    chrome.runtime.sendMessage({ action: "findPerson", email: this.props.currentEmail.from_email }, function(person) { 
     this.setState({person: person}); 
    }.bind(this)); 
    }, 

तो सब ठीक काम करता है। यदि व्यक्ति पाया जाता है, तो मैं एक चीज़ प्रस्तुत करता हूं, और यदि नहीं, तो कुछ और।

जब पहली बार पाया जाता है, तो दृश्य गैर-पाए गए राज्य से राज्य वास्तविक तेज़ पाया जाता है, क्योंकि एपीआई कॉल बहुत तेज़ होते हैं।

उस कॉल को वापस आने तक प्रतीक्षा करने का सबसे अच्छा तरीका क्या है?

उत्तर

3

एक तरीका जिसे आप इसे संभाल सकते हैं, enum पैटर्न के साथ है। इस कोड में, this.state.person या तो लोडिंग सेंटीनेल है, न कि फाउंड सेंटीनेल, या वास्तविक व्यक्ति।

var status = {loading: {}, notFound: {}}; 

// ... 

getInitialState: function(){ 
    return {person: status.loading} 
}, 
fetchPerson: function(){ 
    doFetchPerson(function(person){ 
    if (person) this.setState({person: person}) 
    else this.setState({person: status.notFound}) 
    }.bind(this)) 
}, 
render: function(){ 
    var person = this.state.person) 
    if (person === status.loading) ... 
    else if (person === status.notFound) ... 
    else ... 
} 
+1

ग्रेट फीडबैक। मुझे वास्तव में यह दृष्टिकोण पसंद है क्योंकि मुझे लगता है कि मैं जिस बाँध में था वह था कि शुरुआत में 'व्यक्ति' को '{}' में सेट करना वही था जैसा कि व्यक्ति से पूछताछ की गई थी और वापस नहीं आया '{} '। एक अलग स्थिति के आधार पर 2 को अलग करना बहुत समझ में आता है और निश्चित रूप से उस संदेश को व्यक्त करने के लिए सही घटकों को प्रस्तुत करना आसान बनाता है। धन्यवाद! – brandonhilkert

+0

जिज्ञासा से, 'status.loading === status.notFound' नहीं है? – brandonhilkert

+0

@brandonhilkert ऑब्जेक्ट्स की तुलना संदर्भ से की जाती है, सामग्री नहीं, इसलिए '{}! == {}' और '[]! == []', आदि – FakeRainBrigand

1

क्या यह एक और अधिक डिजाइन सवाल है? आप एक स्पिनर, एक खाली बॉक्स, एक आकार केवल पूर्वावलोकन (फेसबुक फ़ीड की तरह) दिखा सकते हैं, या कुछ भी नहीं।

यदि यह एक तकनीकी प्रश्न है तो रेंडर() में शून्य वापस लौटें।

+0

शायद दोनों में से थोड़ा सा। कम से कम टिप्पणियों ने मुझे दोनों के बारे में सोचा। धन्यवाद! – brandonhilkert

4

वहाँ आप क्या कह रहे हैं, जो कुछ अतुल्यकालिक आपरेशन कि घटक कम्प्लिट्स शुरू की जब तक सब पर प्रस्तुत होने से एक घटक रखने के लिए है करने के लिए कोई अच्छा तरीका है; सबसे अच्छा आप यह कर सकते हैं कि इस मामले के अन्य उत्तरों से तकनीकों का उपयोग इस मामले में थोड़ा अलग करने के लिए करें कि यह पूरा नहीं हुआ है।

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

यदि क्रोम रनटाइम अनुरोध लगातार तेज़ होते हैं, तो यह ठीक हो सकता है, लेकिन सामान्य स्थिति में, यह विचार करने योग्य है कि व्यवहार क्या होगा यदि एसिंक ऑपरेशन को पूरा करने में लंबा समय लगेगा। https://github.com/toplan/react-hold

आप अपने घटक के आकार रखने के लिए प्लेसहोल्डर का उपयोग कर सकते हैं:

+1

आप समय के बारे में एक अच्छा बिंदु बनाते हैं। जब मैंने एपीआई प्रतिक्रियाएं उतनी नाराज नहीं थीं तो मैंने 95 प्रतिशत नहीं माना था। उस स्थिति में, जब तक यह वापस करने का फैसला नहीं किया जाता है, तब तक यह खाली जगह छोड़ने के लिए इष्टतम से कम होगा। विचार करने के लिए महान अंक। – brandonhilkert

1

हो सकता है आप इस परियोजना की जरूरत है।

+0

अच्छा होगा अगर आप अपनी परियोजना – ajimix

+0

के साथ समस्या का समाधान कैसे करें इसका एक उदाहरण जोड़ सकते हैं ये परियोजना में कुछ उदाहरण हैं। देखें: https://github.com/toplan/react-hold/tree/master/examples –

संबंधित मुद्दे