javascript - 承诺解决后未触发reactjs render() this.setState 被重新分配

Question

我在下面有一个函数，它设置一个 InitialState，然后使用 componentWillMount 和 fetchData 进行 api 调用以分配数据 this.state。但是，当 this.setState() 完成时，渲染函数不会被新的 this.state 数据触发，我的函数如下：

var Home = React.createClass({
  getInitialState: function() {
    return {
      city: '',
      weather: '',
      temperature: 0,
      humidity: 0,
      wind: 0,
    }
  },
  fetchData: function() {
    apiHelpers.getCityInfo()
    .then(function (response){
      this.setState({ data: response
      })
    }.bind(this))
  },
  componentWillMount: function(){
    this.fetchData();
  },
  render: function () {
    return (
      <div className="container">
      <Cities data={this.state.data} />
      </div>
    )
  }
});

Answer 1

没有data初始状态。将您的代码更改为-

fetchData: function() {
    apiHelpers.getCityInfo()
     .then(function (response){
      this.setState({
          city: response.city,
          weather: response.weather,
          temperature: response.temperature,
          humidity: response.humidity,
          wind: response.wind,
       })
    }.bind(this))
  },

期望您的 api 响应包含城市、天气等对象。

Answer 2

根据反应文档

componentWillMountclient and server在初始渲染发生之前立即在上调用一次。如果您在此方法中调用 setState，render()将看到更新的状态，并且只会once在状态发生变化的情况下执行。

为了解决这个问题，而不是componentWillMount使用componentDidMount. 由于您正在更新状态变量中的响应data，因此请先定义它，然后无需定义其他状态变量，只需将数据传递给child component并像现在一样更新状态。

var Home = React.createClass({
  getInitialState: function() {
    return {
      data: ''
    }
  },
  fetchData: function() {
    apiHelpers.getCityInfo()
    .then(function (response){
      this.setState({ data: response
      })
    }.bind(this))
  },
  componentDidMount: function(){
    this.fetchData();
  },
  render: function () {
    return (
      <div className="container">
      <Cities data={this.state.data} />
      </div>
    )
  }
});