javascript - react : How to make sure that requested data are available before rendering?

Question

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

我从 OpenWeatherMap 获取的数据: http://openweathermap.org/api

我的问题是(或者是)渲染函数被立即调用。但 OpenWeatherMap API 请求的数据尚不可用。因此解释器会抛出错误，因为访问的 props 尚未定义。

我找到了一种解决方法，将渲染函数的 return 语句放入 if-else 中:

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

var WeatherApp = React.createClass({
  getInitialState: function() {
    return {    
      data: null
    }
  },
  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)
      });
    }.bind(this), function(message) {
      console.log(message);
    });
  },
  render: function() {
    if (this.state.data) {  // Make sure the data is available.
      return (
        <div className="weather-app" >
          <MainInfoPanel city={ this.state.data.city } today={ this.state.data.list[0] } />
          <DayInfos />
          <DayInfos />
          <DayInfos />
          <DayInfos />
        </div>
      );
    } else {
      return null;
    }
  }
});

module.exports = WeatherApp;

我现在工作，但我不确定我是否以正确的方式处理问题。

实际上我认为使用的函数 componentWillMount ( https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount ) 可以解决这个问题。但显然它只是触发请求。其余的继续运行，无需等待数据到达。

因此，我向更有经验的 React 开发人员提出问题:

如何延迟初始渲染直到请求的数据可用？

或者:

避免因缺乏数据而导致应用程序崩溃的正确策略是什么？

Answer 1

您需要将标志条件最初设置为 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

现在，如果您不想使用单独的变量，您也可以使用 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;
        }
      }
    });