क्या fetch द्वारा लाए गए डेटा को रिएक्ट में अन्य घटकों के लिए विश्व स्तर पर सुलभ बनाने का कोई तरीका है?

वर्तमान में, मेरे पास page.json नामक एक json फ़ाइल है, जिसका डेटा नीचे दिया गया है:

{
"logo": {
    "src": "images/logo.png"
},
"logout": {
    "text": "Logout"
},
"comingSoon": {
    "title": "There's more to come!",
    "text": "We know it might look a bit bare here right now, but don't worry - we're working on lots of new features coming soon...",
    "points": [
        {
            "id": 1,
            "title": "View documents plus saved quotes and exclusive discounts",
            "text": "You can do all this right now"
        },
        {
            "id": 2,
            "title": "Make simple changes",
            "text": "Change your email address, phone number or marketing permissions - Coming August 2018"
        },
        {
            "id": 3,
            "title": "Make all changes",
            "text": "Add a car, tell us you've moved house, the posibilities are endless - Coming April 2025"
        }
    ]
},
"test": "hello"

}

मैं चाहता हूं कि मेरे घटक इस डेटा तक पहुंचने में सक्षम हों, जिसे इस समय fetch() का उपयोग करके बुलाया जा रहा है:

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

            this.state = {
              pageData: []
            };
        }

        componentDidMount() {
            fetch('./page.json').then(res => res.json())
            .then( (result) => {
                this.setState({ 
                    pageData: result
                });
            });
        }

        render(){
            return ( 
                <span>
                {this.state.pageData}
                </span>
            )
        }
    }

मैंने कुछ इनलाइन सरणियों के साथ एक const बनाया है, इसलिए मैं इन्हें इस तरह से कॉल कर सकता हूं <WelcomeMessage name={policies[0].id} /> और यह काम करता है जैसा कि मैं आशा करता हूं।

कृपया मुझे बताएं कि क्या आपको मुझे और समझाने की आवश्यकता है - पहली पोस्ट 'एन ऑल!

0
Jonny Vaine 17 अप्रैल 2018, 12:49

3 जवाब

सबसे बढ़िया उत्तर

हां, आप वैश्विक स्तर पर प्राप्त किए गए डेटा का उपयोग कर सकते हैं। अलग-अलग तरीके हैं जिनसे आप इसका इस्तेमाल कर सकते हैं।

  1. आप उन फ़ेच किए गए डेटा को localStorage या sessionStorage में स्टोर कर सकते हैं। दोनों, localStorage और sessionStorage वेब ब्राउज़र में एप्लिकेशन में निर्मित हैं। आप localStorage में मूल्यों को स्टोर कर सकते हैं

    localStorage.setItem('key', JSON.stringify(data) और आप कर सकते हैं JSON.parse(localStorage.getItem('key')); द्वारा लोकलस्टोरेज से डेटा पुनर्प्राप्त करें

  2. आप firebase एप्लिकेशन का उपयोग अपने डेटा को स्टोर करने और किसी भी आवश्यक घटक में उनका उपयोग करने के लिए कर सकते हैं। Firebase एक डेटाबेस सेवा है जो Google द्वारा प्रदान की जाती है, मुख्य रूप से फ्रंटएंड इंजन के लिए डेटाबेस के रूप में उपयोग की जाती है जैसे कि react,angular और vue

  3. आप redux middleware जैसे redux-thunk के साथ संयुक्त Redux का उपयोग कर सकते हैं। Redux का उपयोग state management के लिए किया जाता है। Redux आपके राज्यों को स्टोर करने के लिए store का उपयोग करता है और इसे आपके लिए आवश्यक किसी भी घटक में एक्सेस किया जा सकता है। अन्य राज्य प्रबंधन पैकेज हैं flux आर्किटेक्चर by Facebook और mobx

आप यूट्यूब और ई-लर्निंग पोर्टल पर उपर्युक्त तरीकों के लिए ट्यूटोरियल पा सकते हैं। हैप्पी हैकिंग।

0
Thananjaya S 17 अप्रैल 2018, 13:34

आपके पास एक constants.js फ़ाइल हो सकती है जहां आप किसी भी वेरिएबल को निर्यात करते हैं जिसे आप विश्व स्तर पर पहुंच योग्य बनाना चाहते हैं, और फिर जहां भी आपको उनकी आवश्यकता हो, बस उन वेरिएबल्स को आयात करें।

उदाहरण के लिए, constants.js में:

export const name = "Colin";

फिर अपनी घटक फ़ाइल में, आप import { name } from 'constants'; कर सकते हैं।

ध्यान दें कि यह नामांकित निर्यात का एक उदाहरण है। आप यह लिंक देख सकते हैं जावास्क्रिप्ट में निर्यात पर अधिक विवरण।

0
Colin Ricardo 17 अप्रैल 2018, 12:54

घटक के बीच डेटा साझा करने का सबसे अच्छा तरीका जो माता-पिता के बच्चे के संबंध में नहीं है, Redux का उपयोग करना है। Redux का उपयोग करने का एक अन्य कारण यह है कि redux में डेटा प्रवाह प्रतिक्रिया के डेटा प्रवाह (प्रोप के रूप में) की तारीफ करता है।

0
Rajat Rastogi 17 अप्रैल 2018, 13:10