कैसे AJAX लोड करने के लिए प्रतिक्रिया

Question

इम मेरी json परिणाम मेरी प्रतिक्रिया में कोड

कोड निम्नलिखित

_getComments() { 

const commentList = "AJAX JSON GOES HERE" 

return commentList.map((comment) => { 
    return ( 
      <Comment 
      author={comment.author} 
      body={comment.body} 
      avatarUrl={comment.avatarUrl} 
      key={comment.id} />); 
    }); 
} 

तरह लग रहा है कैसे मैं AJAX इस में लाने करते प्राप्त करने की कोशिश?

Answer 1

सबसे पहले मैं fetchAPI का उपयोग करना चाहता हूं अब ज़ेप्टो के अजाक्स की तरह अजाक्स स्थापित करना, प्रतिक्रियाओं का प्रस्तुत करना एसिन है, आप कन्स्ट्रक्टर में एक राज्य को जोड़ सकते हैं, फिर डेटा लाने के परिणामस्वरूप डेटा को बदल सकते हैं। https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

चलें कहते हैं कि हम हमारे घटक में एक साधारण सूची प्राप्त करना चाहते हैं:

Answer 2

लाने एपीआई पर एक बार देख ले चलें।

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

     this.state = { 
      lst: [] 
     }; 

     this.fetchData = this.fetchData.bind(this); 
    } 

    fetchData() { 
     fetch('url') 
     .then((res) => { 
      return res.json(); 
     }) 
     .then((res) => { 
      this.setState({ lst: res }); 
     }); 
    } 
} 

हम सर्वर से डेटा प्राप्त करने में कर रहे हैं, और हम सेवा से परिणाम प्राप्त है, हम परिवर्तित json के लिए है, और फिर हम परिणाम जो राज्य में सरणी हो जाएगा निर्धारित किया है।

Answer 3

आप jQuery.get या jQuery.ajax componentDidMount में उपयोग कर सकते हैं:

import React from 'react'; 

export default React.createClass({ 
... 
    componentDidMount() { 
     $.get('your/url/here').done((loadedData) => { 
      this.setState({data: loadedData}); 
    }); 
... 
} 

Answer 4

पहले, AJAX का उपयोग कर डेटा लाने के लिए, आप कुछ ही विकल्प हैं:

• Fetch API है, जो बाहर काम करेंगे some browsers में बॉक्स का (आप अन्य ब्राउज़रों में भी काम करने के लिए पॉलीफिल का उपयोग कर सकते हैं)। उदाहरण कार्यान्वयन के लिए this answer देखें।
• डेटा लाने के लिए एक लाइब्रेरी (जो आम तौर पर सभी आधुनिक ब्राउज़रों में काम करती है)। Facebook recommends निम्नलिखित:
  • superagent
  • reqwest
  • react-ajax
  • axios
  • request

अगला, आपको इसे अपने रिएक्ट घटक में कहीं भी उपयोग करने की आवश्यकता है। आप कहां और कैसे करेंगे यह आपके विशिष्ट अनुप्रयोग और घटक पर निर्भर करेगा, लेकिन आम तौर पर मुझे लगता है कि विचार करने के लिए दो परिदृश्य हैं:

1. प्रारंभिक डेटा (जैसे उपयोगकर्ताओं की एक सूची) प्राप्त करना।
2. कुछ उपयोगकर्ता इंटरैक्शन के जवाब में डेटा प्राप्त करना (उदा। अधिक उपयोगकर्ताओं को जोड़ने के लिए बटन पर क्लिक करना)।

प्रारंभिक डेटा ला जीवन चक्र विधि componentDidMount() में किया जाना चाहिए।React Docs से:

var UserGist = React.createClass({ 
    getInitialState: function() { 
    return { 
     username: '', 
     lastGistUrl: '' 
    }; 
    }, 

    componentDidMount: function() { 
    this.serverRequest = $.get(this.props.source, function (result) { 
     var lastGist = result[0]; 
     this.setState({ 
     username: lastGist.owner.login, 
     lastGistUrl: lastGist.html_url 
     }); 
    }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 
    return (
     <div> 
     {this.state.username}'s last gist is 
     <a href={this.state.lastGistUrl}>here</a>. 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />, 
    mountNode 
); 

यहाँ वे डेटा प्राप्त करने का jQuery का उपयोग करें। हालांकि यह ठीक काम करता है, ऐसा संभवतः ऐसा छोटा काम करने के लिए ऐसी बड़ी लाइब्रेरी (आकार के संदर्भ में) का उपयोग करना अच्छा विचार नहीं है।

उदाहरण के जवाब में डेटा प्राप्त करना एक क्रिया इस तरह किया जा सकता है:

var UserGist = React.createClass({ 
    getInitialState: function() { 
    return { 
     users: [] 
    }; 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest && this.serverRequest.abort(); 
    }, 

    fetchNewUser: function() { 
    this.serverRequest = $.get(this.props.source, function (result) { 
     var lastGist = result[0]; 
     var users = this.state.users 
     users.push(lastGist.owner.login) 
     this.setState({ users }); 
    }.bind(this)); 
    }, 

    render: function() { 
    return (
     <div> 
     {this.state.users.map(user => <div>{user}</div>)} 
     <button onClick={this.fetchNewUser}>Get new user</button> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />, 
    mountNode 
);