在使用flux架构完成ajax请求后更新reactjs上下文

时间:2015-12-21 14:51:23

标签: ajax reactjs flux reactjs-flux

我需要在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>
        );

    },

});

提前致谢!

1 个答案:

答案 0 :(得分:2)

我会更改ParentComponent中的getChildContext以引用状态而不是对RowStore的函数调用。

 getChildContext: function() {
        return {
            rows: this.state.rows,
        };
    }

然后,每当一行发生变化,并且它调用了_onRowsChanged回调时,它就可以相应地设置this.state.rows。

我认为在getChildContext中调用RowStore.getAllRows()的原始方法的问题是它只被调用一次。在每次更改时都没有强制它调用RowStore.getAllRows()。

但是,通过使用状态,您可以使用Flux概念来强制&#34;强制&#34;每次更新时状态的变化,这将在上下文中反映出来。