घटक में असिंक्रोनस कॉल WillMount विधि

Question

प्रस्तुत करने के बाद समाप्त होता है मैं घटक WillMount विधि में किसी एपीआई को एसिंक्रोनस कॉल करने की कोशिश कर रहा हूं। वास्तव में मैं render विधि घटक के बाद निष्पादित करने के लिए render विधि चाहता हूं क्योंकि मुझे को render विधि में घटक में पास करने की आवश्यकता है।

यहाँ मेरी कोड है:

class TennisSearchResultsContainer extends React.Component { 
    componentWillMount() { 
    // TODO: Build markers for the map 
    // TODO: Check courtsResults object and database for tennis court 
    this.courtsMarkers = this.props.courtsResults.map((court) => { 
     return new google.maps.Marker({ 
     position: new google.maps.LatLng(JSON.parse(court.LOC).coordinates[1], JSON.parse(court.LOC).coordinates[0]), 
     title: court.NAME, 
     animation: google.maps.Animation.DROP 
     }); 
    }); 
    } 
    render() { 
    return <TennisSearchResults criterias={this.props.criterias} courtsMarkers={this.courtsMarkers} />; 
    } 
} 

मैं तो समझ में नहीं आता क्यों मेरे विधि प्रस्तुत करना मेरे बच्चे घटक को समाप्त करने और अपरिभाषित रंगमंच की सामग्री पारित करने के लिए अतुल्यकालिक कॉल के लिए इंतजार नहीं है लगता है ...

क्या मैं सही हूँ? और इसे ठीक करने के लिए मुझे क्या करना चाहिए? इसे संभालने का तरीका क्या है?

Answer 1

आपको जावास्क्रिप्ट एसिंक व्यवहार को बेहतर ढंग से समझने की आवश्यकता हो सकती है। Async का मतलब है "इंतजार मत करो"। यह कार्य पृष्ठभूमि में होगा और अन्य कोड निष्पादित करना जारी रहेगा। इसका प्रबंधन करने का एक अच्छा तरीका है अपने घटक पर राज्य सेट करना। उदाहरण के लिए, जब आप componentWillMount दर्ज करते हैं तो loading स्थिति true पर सेट करें। फिर जब आपका एसिंक फ़ंक्शन पूरा हो जाता है, तो उस स्थिति को false पर सेट करें। आपके render फ़ंक्शन में आप या तो "लोडिंग ..." संदेश या डेटा प्रदर्शित कर सकते हैं।

यहां कुछ कोड है जो डेटा एसिंक को लाने का एक सरल उदाहरण दिखाता है और आप इसे कैसे संभाल सकते हैं। अपने ब्राउज़र में डेवलपर टूल खोलें और रिएक्ट लाइफसाइक्ल को बेहतर ढंग से समझने के लिए कंसोल आउटपुट देखें।

class MyComponent extends React.Component { 
    constructor(props) { 
    super(); 

    console.log('This happens 1st.'); 

    this.state = { 
     loading: false, 
     data: '' 
    }; 

    } 

    loadData() { 
    // In real life you might use something like 'fetch' inside this 
    // function to get data. 
    // Since 'fetch' returns a promise, we can easily simulate that 
    // to keep the example simple. 
    var promise = new Promise((resolve, reject) => { 
     setTimeout(() => { 
     console.log('This happens 5th (after 3 seconds).'); 
     resolve('This is my data.'); 
     }, 3000); 
    }); 

    console.log('This happens 3rd.'); 

    return promise; 
    } 

    componentWillMount() { 

    console.log('This happens 2nd.'); 

    this.setState({ loading: true }); 
    this.loadData() 
    .then((data) => { 
     console.log('This happens 6th.'); 
     this.setState({ 
     data: data, 
     loading: false 
     }); 
    }); 
    } 

    render() { 

    if (this.state.loading) { 
     console.log('This happens 4th - when waiting for data.'); 
     return <h2>Loading...</h2>; 
    } 

    console.log('This happens 7th - after I get data.'); 
    return (
     <div> 
     <p>Got some data!</p> 
     <p>{this.state.data}</p> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <MyComponent />, 
    document.getElementsByClassName('root')[0] 
); 

और यहां working example on CodePen है।