Блог

У меня есть функция ниже, которая устанавливает initialState, а затем выполняет вызов api с componentWillMount и fetchData для присвоения данных 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>
    )
  }
});
  

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 содержит объект в виде города, погоды … и так далее..

Согласно документам react

componentWillMount вызывается один раз, как на client 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>
    )
  }
});