Javascript 反应：如何确保渲染前请求的数据可用？

我正在尝试用React制作一个天气小部件

我从OpenWeatherMap获得的数据：

我的问题是（或是）立即调用渲染函数。但是从OpenWeatherMapAPI请求的数据还不可用。因此，解释器抛出一个错误，因为访问了尚未定义的道具

通过将render函数的return语句放入if-else中，我找到了一种解决方法：

var React=require（'React'）；
var DayInfos=require（'./DayInfos.jsx'）；
var mainfapanel=require（'./mainfapanel.jsx'）；
var WeatherApp=React.createClass({
getInitialState:函数（）{
返回{
数据：空
}
},
componentWillMount:function（）{//在初始呈现之前调用
var apiData=新承诺（函数（解析、拒绝）{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
如果（request.status==200）{
解析（request.responseText）；
}否则{
拒绝（'openweathermap上的HTTP请求失败'）；
} 
}
}
request.open（'get'，'http://api.openweathermap.org/data/2.5/forecast?q=London，us&mode=json&appid=efcd313fa7a139f2fb20de306648eb8d'）；
request.send（）；
});
apiData.then（函数（weatherData）{
这是我的国家({
数据：JSON.parse（weatherData）
});
}.bind（此）、函数（消息）{
控制台日志（消息）；
});
},
render:function（）{
如果（this.state.data）{//请确保数据可用。
返回(
);
}否则{
返回null；
}
}
});
module.exports=WeatherApp我通常使用微调器指示小部件正在加载：

render() {
    return this.state.loading ? (
      <div className="spinner">
        <Spinner />
      </div>
    ) : this.renderView();
  }

我通常使用微调器指示小部件正在加载：

render() {
    return this.state.loading ? (
      <div className="spinner">
        <Spinner />
      </div>
    ) : this.renderView();
  }

当数据到达时，首先需要将标志条件设置为false和true

var React = require('react');
var DayInfos = require('./DayInfos.jsx');
var MainInfoPanel = require('./MainInfoPanel.jsx');

var WeatherApp = React.createClass({
  getInitialState: function() {
    return {    
      data: null,
      flag:false, //add flag
    }
  },
  componentWillMount: function() { // Call before the initial rendering
    var apiData = new Promise(function(resolve, reject) {
      var request = new XMLHttpRequest();

      request.onreadystatechange = function() {
        if (request.readyState === 4) {
          if (request.status === 200) {
            resolve(request.responseText);
          } else {
            reject('HTTP request on openweathermap has failed.');
          } 
        }
      }

      request.open('get', 'http://api.openweathermap.org/data/2.5/forecast?q=London,us&mode=json&appid=efcd313fa7a139f2fb20de306648eb8d');
      request.send();
    });

    apiData.then(function(weatherData) {
      this.setState({
        data: JSON.parse(weatherData),
        flag:true   // update state
      });
    }.bind(this), function(message) {
      console.log(message);
    });
  },
  render: function() {
    return flag ?   
        (
        <div className="weather-app" >
          <MainInfoPanel city={ this.state.data.city } today={ this.state.data.list[0] } />
          <DayInfos />
          <DayInfos />
          <DayInfos />
          <DayInfos />
        </div>
      )
    :
      null;
    }
  }
});

module.exports = WeatherApp

var React=require（'React'）；
var DayInfos=require（'./DayInfos.jsx'）；
var mainfapanel=require（'./mainfapanel.jsx'）；
var WeatherApp=React.createClass({
getInitialState:函数（）{
返回{
数据：空，
flag:false，//添加标志
}
},
componentWillMount:function（）{//在初始呈现之前调用
var apiData=新承诺（函数（解析、拒绝）{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
如果（request.status==200）{
解析（request.responseText）；
}否则{
拒绝（'openweathermap上的HTTP请求失败'）；
} 
}
}
request.open（'get'，'http://api.openweathermap.org/data/2.5/forecast?q=London，us&mode=json&appid=efcd313fa7a139f2fb20de306648eb8d'）；
request.send（）；
});
apiData.then（函数（weatherData）{
这是我的国家({
数据：JSON.parse（weatherData），
flag:true//更新状态
});
}.bind（此）、函数（消息）{
控制台日志（消息）；
});
},
render:function（）{
返回旗？
(
)
:
无效的
}
}
});
module.exports=WeatherApp

现在，如果不想使用单独的变量，也可以使用data.length属性进行跟踪

但是这里您需要为数据分配一个类型数组或对象，data=[]或data={}

 render: function() {
        return data.length  > 0 ?   
            (
            <div className="weather-app" >
              <MainInfoPanel city={ this.state.data.city } today={ this.state.data.list[0] } />
              <DayInfos />
              <DayInfos />
              <DayInfos />
              <DayInfos />
            </div>
          )
        :
          null;
        }
      }
    });

render:function（）{
返回数据长度>0？
(
)
:
无效的
}
}
});
当数据到达时，首先需要将标志条件设置为false和true

var React = require('react');
var DayInfos = require('./DayInfos.jsx');
var MainInfoPanel = require('./MainInfoPanel.jsx');

var WeatherApp = React.createClass({
  getInitialState: function() {
    return {    
      data: null,
      flag:false, //add flag
    }
  },
  componentWillMount: function() { // Call before the initial rendering
    var apiData = new Promise(function(resolve, reject) {
      var request = new XMLHttpRequest();

      request.onreadystatechange = function() {
        if (request.readyState === 4) {
          if (request.status === 200) {
            resolve(request.responseText);
          } else {
            reject('HTTP request on openweathermap has failed.');
          } 
        }
      }

      request.open('get', 'http://api.openweathermap.org/data/2.5/forecast?q=London,us&mode=json&appid=efcd313fa7a139f2fb20de306648eb8d');
      request.send();
    });

    apiData.then(function(weatherData) {
      this.setState({
        data: JSON.parse(weatherData),
        flag:true   // update state
      });
    }.bind(this), function(message) {
      console.log(message);
    });
  },
  render: function() {
    return flag ?   
        (
        <div className="weather-app" >
          <MainInfoPanel city={ this.state.data.city } today={ this.state.data.list[0] } />
          <DayInfos />
          <DayInfos />
          <DayInfos />
          <DayInfos />
        </div>
      )
    :
      null;
    }
  }
});

module.exports = WeatherApp

var React=require（'React'）；
var DayInfos=require（'./DayInfos.jsx'）；
var mainfapanel=require（'./mainfapanel.jsx'）；
var WeatherApp=React.createClass({
getInitialState:函数（）{
返回{
数据：空，
flag:false，//添加标志
}
},
componentWillMount:function（）{//在初始呈现之前调用
var apiData=新承诺（函数（解析、拒绝）{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
如果（request.status==200）{
解析（request.responseText）；
}否则{
拒绝（'openweathermap上的HTTP请求失败'）；
} 
}
}
request.open（'get'，'http://api.openweathermap.org/data/2.5/forecast?q=London，us&mode=json&appid=efcd313fa7a139f2fb20de306648eb8d'）；
request.send（）；
});
apiData.then（函数（weatherData）{
这是我的国家({
数据：JSON.parse（weatherData），
flag:true//更新状态
});
}.bind（此）、函数（消息）{
控制台日志（消息）；
});
},
render:function（）{
返回旗？
(
)
:
无效的
}
}
});
module.exports=WeatherApp

现在，如果不想使用单独的变量，也可以使用data.length属性进行跟踪

但是这里您需要为数据分配一个类型数组或对象，data=[]或data={}

 render: function() {
        return data.length  > 0 ?   
            (
            <div className="weather-app" >
              <MainInfoPanel city={ this.state.data.city } today={ this.state.data.list[0] } />
              <DayInfos />
              <DayInfos />
              <DayInfos />
              <DayInfos />
            </div>
          )
        :
          null;
        }
      }
    });

render:function（）{
返回数据长度>0？
(
)
:
无效的
}
}
});
一种更方便（但可能不那么明显）的方法是：

render: function() {
  return (
    this.state.data && 
      <div className="weather-app">
        <MainInfoPanel city={this.state.data.city} today={...} />
        <DayInfos />
        <DayInfos />
        <DayInfos />
        <DayInfos />
      </div>
  );
}

render:function（）{
返回(
this.state.data&&
);
}