重新分配 promise 解析 this.setState 后未触发 reactjs render()

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

根据反应文档

componentWillMount 在 client and server 上被调用一次，紧接在初始渲染发生之前。如果您在此方法中调用 setState，render() 将看到更新后的状态，并且将仅执行 once 尽管状态发生变化。

要解决此问题，请使用 componentDidMount 而不是 componentWillMount。由于您正在更新状态变量 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>
    )
  }
});

Answer 2

初始状态没有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 响应包含城市、天气等对象..

重新分配 promise 解析 this.setState 后未触发 reactjs render()

reactjs render() not triggered after promise resolves this.setState is re-assigned

javascript

components

render

setstate

reactjs