如何在响应中加载AJAX
发布时间:2020-12-15 23:13:34 所属栏目:百科 来源:网络整理
导读:我试图让我的json结果进入我的反应代码 代码如下所示 _getComments() { const commentList = "AJAX JSON GOES HERE"return commentList.map((comment) = { return ( Comment author={comment.author} body={comment.body} avatarUrl={comment.avatarUrl} key
我试图让我的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. > superagent 接下来,您需要在React组件中的某个位置使用它.您在何处以及如何执行此操作取决于您的具体应用和组件,但通常我认为有两种情况需要考虑: >获取初始数据(例如用户列表). 获取初始数据应在生命周期方法 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 ); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |