रिएक्ट रेंडर फ़ंक्शंस में async/await का उपयोग कैसे करें

रिएक्ट में, रेंडर फ़ंक्शन आमतौर पर शुद्ध, सिंक्रोनस ऑपरेशंस के लिए होता है। हालाँकि, कुछ परिदृश्यों में, आपको इस फ़ंक्शन के भीतर अतुल्यकालिक कार्य करने की आवश्यकता का सामना करना पड़ सकता है। यह आलेख रेंडर फ़ंक्शन में एसिंक/प्रतीक्षा सिंटैक्स का प्रभावी ढंग से उपयोग करने का तरीका बताएगा। रेंडर फ़ंक्शन में सीधे मैप फ़ंक्शन के भीतर प्रतीक्षा करने से अप्रत्याशित व्यवहार हो सकता है। ऐसा इसलिए है क्योंकि मैप फ़ंक्शन सिंक्रोनस संचालन की अपेक्षा करता है, और इसके भीतर एसिंक्रोनस कॉल करने का प्रयास रेंडरिंग प्रक्रिया के प्रवाह को बाधित कर सकता है।

डेटा फ़ेचिंग को प्रदर्शित करने से अलग करना

इस समस्या को हल करने के लिए, डेटा लाने की प्रक्रिया को डिस्प्ले लॉजिक से अलग करने की अनुशंसा की जाती है। रेंडर फ़ंक्शन के भीतर एसिंक्रोनस ऑपरेशन करने के बजाय, एक अलग घटक या हुक में डेटा लाने की शुरुआत करना अधिक उपयुक्त है।

पैरेंट कंपोनेंट में एसिंक्रोनस डेटा फ़ेचिंग

इस दृष्टिकोण में, आप अतुल्यकालिक अनुरोध करने और डेटा प्रबंधित करने के लिए जिम्मेदार एक मूल घटक (उदाहरण के लिए, ParentThatFetches) बनाते हैं। जीवनचक्र विधियों या हुक का उपयोग करके, मूल घटक डेटा लाता है और इसे राज्य में संग्रहीत करता है। इसके बाद, मूल घटक सशर्त रूप से एक शुद्ध कार्यात्मक चाइल्ड घटक (उदाहरण के लिए, चाइल्ड) प्रस्तुत करता है जो प्राप्त डेटा को प्रॉप्स के रूप में प्राप्त करता है। ]

this.state = {};

}

componentDidMount () {

fetch('/some/async/data') .तब(सम्मान => सम्मान.json()) .then(data => this.setState({data}));

}

this.state = {};

render() {

{this.state.data && ( )}

}

fetch('/some/async/data')
  .then(resp => resp.json())
  .then(data => this.setState({data}));

const Child = ({ data }) => (

{data.map((x, i) => ({x}))}

this.state = {};

);

हुक का उपयोग करके डेटा प्राप्त करना

रिएक्ट में हुक के आगमन के साथ, डेटा प्राप्त करना और भी सरल हो सकता है। निम्नलिखित कोड स्निपेट दर्शाता है कि डेटा को एसिंक्रोनस रूप से लाने और तदनुसार स्थिति को अपडेट करने के लिए हुक का उपयोग कैसे करें:

this.state = {};

const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {

const getData = async() => { स्थिरांक सम्मान = प्रतीक्षा फ़ेच('कुछ/यूआरएल'); स्थिरांक json = resp.json का इंतजार करें() अपडेटडेटा(json); } getData();

}, []);

रिटर्न डेटा &&
}