我有一个在初始加载时正确呈现的应用程序 . 它是从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上放置唯一键,它什么也没做 .