描述你的问题
如何让ajax请求获取到数据后再执行下面代码里的for循环?老是报错说apt_list没定义,这个apt_list是一个全局变量,存着ajax请求返回的数据。但是直接return apt_list又可以显示在页面上。贴上相关代码
-
Aptlist = React.createClass({
delay:function(){ setTimeout('this.render()',5000); return null }, render:function(){ return <p>{ ( function (){ var list="<li>日期   时间   教室   理由</li>"; for(var i = 0; i <=apt_list.length; i++) { list = list+ "<li><span>"+apt_list[i].date+"</span>" "<span>"+apt_list[i].time_id+"</span>" "<span>"+apt_list[i].classroom_id+"</span>" "<span>"+apt_list[i].reason+"</span>" "</li>"; } return list })() } </p> }
});
React.render(<Aptlist></Aptlist>,document.getElementById('all_apt')); 贴上报错信息
贴上相关截图
已经尝试过哪些方法仍然没解决(附上相关链接)
for(var i = 0; i <=apt_list.length; i++) {
遍历数组的时候需要用小于,而不是小于等于
for(var i = 0; i <apt_list.length; i++) {
初始化状态
constructor() {
super()
this.state = {
loading: true,
infos: []
}
}
在ajax回调中设置状态
$.ajax({
success:function(data) {
this.setState({
loading: false,
infos: data
})
}
})
数据获取之前显示loading, 数组用map()遍历更佳
render() {
return (
{this.state.loading
? <Loading/>
: this.state.infos.map((info) => {
<li>info</li>
})
}
)
}