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

初始状态没有catch。将代码更改为 -

data

期待你的api响应包含对象作为城市，天气......等等..

Answer 2

根据反应文档

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

要解决此问题，请使用componentWillMount代替componentDidMount。由于您正在更新状态变量data中的响应，因此首先定义它，然后不需要定义其他状态变量，只需将数据传递到child component并更新状态，就像您现在所做的那样。 / p>

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

在promise解析this.setState后重新分配reactjs render（）

2 个答案: