Question

我有一个在初始加载时正确呈现的应用。它是来自json obj的渲染数据我作为道具传入。我将数据保存在状态数组中。稍后发生异步调用。使用setState我相应地更新状态。当React重新渲染时，它会执行两次传递 - 一次具有正确的新状态，当我单步执行时，我可以看到，然后一个具有初始状态。初始状态渲染最后发生，所以我保持相同的初始状态。是什么给了什么？

updateTab = React.addons.update(this.state, {
    tabResults: {0: {docs: {$set: data.response.docs}}},
    counts: {$set: data.facet_counts.facet_fields.categories},
    tab: { $set: b }
  });
this.setState(updateTab, this.saveTab);

然后我的组件看起来像：

var TabControls = React.createClass({
  render: function(){
    var tabsum = 0;
    countrow = [];

    function addit(d){
      tabsum = tabsum + d;
    }

    for(o = 0; o < 5; o++){
      if(this.props.counts[o] != null){
        addit(this.props.counts[o]);
      }
    }

    if(this.props.tabID == 0){
        countrow.push(<p className="result-count-large col-sm-6">{tabsum} Results</p>);
    }
    else{
      countrow.push(<p className="result-count-large col-sm-6">{this.props.tabCount} Results</p>);
    }

    return (
      <div className="search-tab-controls container-fluid">
        {countrow}
        <div className="col-sm-6">
          <p>Sort by</p>
          <select className="form-control">
            <option>Relevance</option>
            <option>Recent</option>
          </select>
          <a href="#" className="test"><img src="/img/search/print-icon.jpg" alt="print search results" /></a>
        </div>
      </div>
    );
  }
});

像我说的那样，我可以一步一步看到这种情况发生。我看它设置正确的updateTab变量以推送到setState。然后我看着我的组件重新渲染。第一次重新渲染状态是正确的。第二次重新渲染具有初始的全零状态。我尝试在COUNTRow数组中的LI上放置唯一键，但没有做任何事情。

React渲染/重新渲染两个不同版本的状态

0 个答案: