我试图让我的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？
解决方法
首先,要使用AJAX获取数据,您有以下几种选择：
> Fetch API,它将在some browsers开箱即用(您可以使用polyfill使其在其他浏览器中工作).有关示例实现,请参见this answer.
>用于数据获取的库(通常适用于所有现代浏览器). @L_404_3@以下内容：
> superagent
> reqwest
> react-ajax
> axios
> request
接下来,您需要在React组件中的某个位置使用它.您在何处以及如何执行此操作取决于您的具体应用和组件,但通常我认为有两种情况需要考虑：
>获取初始数据(例如用户列表).
>获取数据以响应某些用户交互(例如,单击a
按钮添加更多用户).
获取初始数据应在生命周期方法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
);
