React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
下面这个案例用到了jQuery，所以安装jQuery先
npm i jquery -S
引入jQuery
import $ from 'jquery'
import React,{ Component,Fragment } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import $ from 'jquery';
class User extends Component{
constructor(props){
super(props);
this.state={
username:'',userUrl:''
}
}
//组件挂载完成后
componentDidMount(){
this.myAjax=$.get(this.props.source,res=>{
var lastGist=res[0];
console.log(lastGist);
this.setState({
username:lastGist.owner.login,userUrl:lastGist.html_url
})
})
}
组件将要卸载前
componentWillUnmount(){
取消未完成的请求
.myAjax.abort();
}
render(){
return(
<Fragment>
<div>用户账号：{this.state.username}</div>
<a href={this.state.userUrl}>用户网址：{this.state.userUrl}</a>
</Fragment>
)
}
}
ReactDOM.render(
<div>
<User source="https://api.github.com/users/octocat/gists" />
</div>,document.getElementById('example')
);
serviceWorker.unregister();
可以使用之前知识列出所有条目
import React,{ Component } from 'react'{
username:[],userUrl:[]
}
}
var lastGist=res;
var usernames=[];
var userUrls=[];
lastGist.map(
function proc(item){
usernames.push(item.owner.login);
userUrls.push(item.html_url);
item;
}
)
.setState({
username:usernames,userUrl:userUrls
})
})
}
var names=.state.username;
var urls=.state.userUrl;
(
<ul>
{
names.map(
(item,index){
(
<div key={index}>
<li>{item}</li>
<a href={urls[index]} rel="nofollow">{urls[index]}</a>
</div>
)
}
)
}
</ul>
)
);
serviceWorker.unregister();
原文链接：/react/881417.html
