Javascript promise解决此问题后未触发reactjs render（）。重新分配setState

下面有一个函数，它设置一个InitialState，然后使用componentWillMount和fetchData进行api调用，以将数据分配给this.state。但是，完成此.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>
    )
  }
});

var Home=React.createClass({
getInitialState:函数（）{
返回{
城市：''，
天气：''，
温度:0,，
湿度:0,，
风:0,，
}
},
fetchData:function（）{
apiHelpers.getCityInfo（）
.然后（功能（响应）{
this.setState（{data:response
})
}.绑定（本）
},
componentWillMount:function（）{
这是fetchData（）；
},
渲染：函数（）{
返回(
)
}
});

根据react文档

componentWillMount

在初始渲染发生之前在

客户端和服务器上调用一次。如果在此方法中调用setState，
render（）
将看到更新的状态，并且将仅执行一次
，而不管状态如何更改

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

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

var Home=React.createClass({
getInitialState:函数（）{
返回{
数据：“”
}
},
fetchData:function（）{
apiHelpers.getCityInfo（）
.然后（功能（响应）{
this.setState（{data:response
})
}.绑定（本）
},
componentDidMount:function（）{
这是fetchData（）；
},
渲染：函数（）{
返回(
)
}
});
初始状态下没有
数据。将代码更改为-

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响应包含城市、天气等对象。。。等等..
你怎么知道渲染没有被触发？可能它被触发了，但呈现了相同的结果？嗨，我在fetchData和render中插入了一个console.log，承诺解决了，setState被执行了，但是render方法不会重新运行并使用新的this.state值进行更新。答案应该会帮助您
componentWillMount
很少使用。您好，Shubham，componentDidMount（）根本不运行fetchData函数。您是否尝试将.log（）导入fetchData函数并查看它是否运行是，co componentDidMount和componentWillMount没有运行fetchData函数它没有运行fetchData或apihelpers.getcityinfo您可以检查它是否正在运行fetchData和apihelpers，但是render（）在apihelpers承诺解析之前运行，一旦承诺解析，render（）就不会再次运行