प्रतिक्रिया - एपीआई

Question

से प्रारंभिक स्थिति सेट करें मेरे पास एक बाकी एपीआई बैक एंड सेट अप है। हालांकि, मैं प्रतिक्रिया करने के लिए नया हूँ। मैं घटक के लिए getInitialState फ़ंक्शन के अंदर मान सेट करना चाहता हूं। लेकिन मैं यह समझ नहीं सकता कि जिस वस्तु को मुझे वापस करने की आवश्यकता है उसे पॉप्युलेट करना है क्योंकि मैं एक एसिंक्रोनस http अनुरोध का उपयोग कर रहा हूं। जिस ऑब्जेक्ट में मैंने वापसी की है, वैसे ही मानों को अपरिभाषित किया है। मैं इसके आसपास कैसे पहुंचू?
मैं अभी तक fetch (किसी भी अन्य पुस्तकालय, ईमानदारी से स्विच कर सकते हैं) का उपयोग कर रहा हूँ। मैं समझ नहीं पा रहा हूं कि getInitialState को कॉल करने के तरीके के बाद एसिंक्रोनस कॉल ने ऐसा होने से पहले कुछ मूल्य वापस कर दिया है।

import React from 'react'; 
import 'whatwg-fetch'; 

export default class IndexPage extends React.Component { 

    render() { 

    // I basically need to call getInitialState after the last promise has been resolved 
    fetch('https://localhost:3000/api/aye') 
    .then(function(response) { 
     return response.json(); 
    }) 
    .then(function(json) { 
     // Need to return some values from this. 
    }); 

    return (
     <div> 
     <h1>{this.state.jsonReturnedValue}</h1> 
     </div> 
    ); 
    } 
} 

अग्रिम धन्यवाद!

Answer 1

आपको state मूल्यों

export default class IndexPage extends React.Component { 
 

 
    constructor() { 
 
    super(); 
 
    
 
    this.state = { 
 
     jsonReturnedValue: null 
 
    } 
 
    } 
 
    
 
    componentDidMount() { 
 
    fetch('https://localhost:3000/api/aye') 
 
     .then(response => response.json()) 
 
     .then(json => { 
 
     this.setState({ jsonReturnedValue: json }); 
 
     }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <h1>{ this.state.jsonReturnedValue }</h1> 
 
     </div> 
 
    ); 
 
    } 
 
}

Answer 2

आपको निम्नलिखित के साथ कुछ करना चाहिए। सबसे पहले, constructor विधि में state बनाएं। इसके बाद आप {this.state.jsonReturnedValue} का संदर्भ देकर इस मान का उपयोग अपने render विधि में कर सकते हैं। यदि आप इस बारे में अवगत नहीं हैं तो constructor() विधि getInitialState() का ES6 संस्करण है। यह वह जगह है जहां आपको घटक के state सेट करना चाहिए।

फिर componentDidMount जो render विधि के बाद चलेंगे में आप API कॉल एपीआई बनाने के लिए और this.state.jsonReturnedValue का मान अपडेट प्रतिक्रिया के setState विधि का उपयोग कर सकते हैं।

जब this.setState() रन और एक नया मान सेट करता है तो यह render विधि फिर से चलाएगा और तदनुसार दृश्य अपडेट करेगा।

export default class IndexPage extends React.Component { 

    constructor(){ 
    super(); 
    this.state = { 
     jsonReturnedValue: null 
    } 
    } 

    componentDidMount() { 
    this.jsonList(); 
    } 

    jsonList() { 
    fetch('https://localhost:3000/api/aye') 
    .then(function(response) { 
     this.setState({ 
     jsonReturnedValue: response.json() 
     }) 
    }) 
    } 

    render() { 
    return (
     <div> 
     <h1>{this.state.jsonReturnedValue}</h1> 
     </div> 
    ); 
    } 
} 

Answer 3

बदलने के लिए अपनी स्थिति में this.setState बुलाना चाहिए -

यह प्रतिपादन के साथ पहली बार के लिए किया जाना बेहतर है खाली राज्य डेटा कहता है

constructor(props){ 
    super(props); 

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

और componentDidMount में ajax कॉल करते हैं, इस जगह है जहाँ आप डोम हेरफेर और REST के माध्यम से डेटा प्राप्त करने का ajax अनुरोध भेज सकते हैं है।

नए डेटा के बाद नए डेटा

this.setState({data:newDataFromServer}); 

जैसे के साथ राज्य की स्थापना की componentDidMount

componentDidMount() { 
sendAjaxRequest() 
.then(
     (newDataFromServer) => { 
       this.setState({data : newDataFromServer }); 

    }); 
} 

में सर्वर से लाई गई है इस कारण होगा फिर से प्रतिपादन से लाई गई नवीनतम डेटा के साथ क्या करने के लिए सर्वर और नए राज्य परिवर्तन परिलक्षित होंगे।