How to load AJAX into reaction

Question

I am trying to get my json result in my reaction code

The code is as follows

_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} />); }); } 

How to get AJAX in this?

Answer 1

First , to get data using AJAX, you have several options:

• Fetch API that will work out of the box in some browsers (you can use polyfill to make it work in other browsers as well). See this answer for an example implementation.
• Library for data extraction (which usually works in all modern browsers). Facebook recommends the following:
  • superagent
  • reqwest
  • react-ajax
  • axios
  • request

Next , you need to use it somewhere in your React component. Where and how you do this will depend on your specific application and component, but as a rule, I think there are two scenarios:

• Getting the source data (for example, a list of users).
• Getting data in response to some user interaction (for example, clicking to add more users).

Source data must be obtained in the componentDidMount() life cycle method. From 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} last gist is <a href={this.state.lastGistUrl}>here</a>. </div> ); } }); ReactDOM.render( <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode ); 

Here they use jQuery to retrieve data. Although this works very well, it is probably not recommended to use such a large library (in terms of size) to perform such a small task.

Receiving data in response to, for example, an action can be performed as follows:

 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 ); 

Answer 2

Let's look at the fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Suppose we want a simple list in our component.

 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 }); }); } } 

We retrieve the data from the server, and get the result from the service, we convert it to json, and then we set the result, which will be an array in state.

Answer 3

You can use jQuery.get or jQuery.ajax in componentDidMount:

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

Answer 4

First, I would like to use fetchAPI to now install ajax, like zepto ajax, rendering reactjs - asyn, you can initialize the state in the constructor, and then change the state according to the data from the selection result.