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

Posted

技术标签:

【中文标题】承诺解决后未触发reactjs render() this.setState 被重新分配【英文标题】:reactjs render() not triggered after promise resolves this.setState is re-assigned 【发布时间】:2017-02-18 19:05:25 【问题描述】:

我有一个函数,它在下面设置一个 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>
    )
  
);

【问题讨论】:

你怎么知道渲染没有被触发?也许它被触发但呈现相同的结果? 嗨,我在 fetchData 和 render 中插入了一个 console.log,promise 解决了,setState 被执行,但是 render 方法不会重新运行并使用新的 this.state 值更新 那么,答案应该对您有所帮助。 componentWillMount 很少使用。 【参考方案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>
    )
  
);

【讨论】:

嗨 Shubham,componentDidMount() 根本不运行 fetchData 函数。 你试过console.log()到fetchData函数中看是否运行 嗨,是的,共同 componentDidMount 和 componentWillMount 没有运行 fetchData 函数 是不是没有运行 fetchdata 或者 apihelpers.getcityinfo 可以查一下 它正在运行 fetchData 和 apihelpers,但是 render() 在 apiHelpers 承诺解决之前运行,一旦承诺解决,render() 就不会再次运行【参考方案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 响应包含城市、天气等对象......

【讨论】:

以上是关于承诺解决后未触发reactjs render() this.setState 被重新分配的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ReactJS 中触发模型更改的重新渲染?

Reactjs-onClick 事件在我第一次单击按钮时未触发

在后台某个时间后未触发Android地理围栏?

rails jquery.turbolinks javascript在页面更改后未触发

ReactJS + Redux + Reduc-thunk 无法调度承诺

在 ReactJS 中卸载组件时取消承诺