Question

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

    },

});

提前致谢！

Answer 1

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

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

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

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

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

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

1 个答案: