我需要在ajax请求完成后更新上下文。我正在使用flux体系结构,一切正常,当我的组件被通知更新时我需要设置新的上下文。
一个简单的演示:
我有一个父组件,它通过调用商店来生成上下文。在其他地方初始化ajax请求后,存储获取数据。像这样:
RowAPI.ajaxGetAllRows();
然后我有我的组件,其中包含上下文:
let ParentComponent = React.createClass({
childContextTypes: {
rows: React.PropTypes.object
},
getChildContext: function() {
return {
rows: RowStore.getAllRows(),
};
},
componentDidMount: function() {
RowStore.addChangeListener(this._onRowsChanged);
},
componentWillUnmount: function() {
RowStore.removeChangeListener(this._onRowsChanged);
},
render() {
return (
<ChildComponent />
);
},
_onRowsChanged: function() {
//Now we need to update context
}
});
现在,由于我们正在监听行更改,因此当我们的ajax请求完成并将数据放入我们的商店时,我们将获得更新。现在我们需要获取该数据并将其设置为上下文。这就是问题所在。
这是我使用上下文的子组件。我知道我可以将这些行作为道具传递给我的孩子,但这仅仅是一个例子,在我的真实场景中我有很多孩子需要传递道具。
let ChildComponent = React.createClass({
contextTypes: {
rows: React.PropTypes.object
},
render() {
return (
<div style={styles.wrapper}>
{this.context.rows}
</div>
);
},
});
提前致谢!
答案 0 :(得分:2)
我会更改ParentComponent中的getChildContext以引用状态而不是对RowStore的函数调用。
getChildContext: function() {
return {
rows: this.state.rows,
};
}
然后,每当一行发生变化,并且它调用了_onRowsChanged回调时,它就可以相应地设置this.state.rows。
我认为在getChildContext中调用RowStore.getAllRows()的原始方法的问题是它只被调用一次。在每次更改时都没有强制它调用RowStore.getAllRows()。
但是,通过使用状态,您可以使用Flux概念来强制&#34;强制&#34;每次更新时状态的变化,这将在上下文中反映出来。