javascript - 如何让ajax请求获取到数据apt_list后再执行下面代码里的for循环？

Question

1. 描述你的问题
   如何让ajax请求获取到数据后再执行下面代码里的for循环？老是报错说apt_list没定义，这个apt_list是一个全局变量，存着ajax请求返回的数据。但是直接return apt_list又可以显示在页面上。

2. 贴上相关代码

3. Aptlist = React.createClass({

      delay:function(){
          setTimeout('this.render()',5000);
          return null
   
      },
      render:function(){   
          return   <p>{
           (  function (){
              
          var list="<li>日期&nbsp&nbsp&nbsp时间&nbsp&nbsp&nbsp教室&nbsp&nbsp&nbsp理由</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'));

4. 贴上报错信息

5. 贴上相关截图

1. 已经尝试过哪些方法仍然没解决（附上相关链接）

Answer 1

for(var i = 0; i <=apt_list.length; i++) {

遍历数组的时候需要用小于，而不是小于等于

for(var i = 0; i <apt_list.length; i++) {

Answer 2

初始化状态

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