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

Posted 2023-02-22

【中文标题】在使用通量架构完成 ajax 请求后更新 reactjs 上下文

【英文标题】：update reactjs context after ajax request finished with flux architecture

【发布时间】：2016-03-27 16:33:51

【问题描述】：

我需要在 ajax 请求完成后更新上下文。我正在使用通量架构，并且一切正常，当我的组件收到有关更新的通知时，我需要设置新的上下文。

一个简单的演示：

我有一个父组件，它通过调用商店来生成上下文。在其他地方初始化 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>
        );

    ,

);

提前致谢！

【问题讨论】：

您是否尝试过使用通过_onRowsChanged 更新的状态？这样，您可以使用类似 this.state.rows 而不是 RowStore.getAllRows();

感谢它的工作，从没想过它会在状态更改时重做所有上下文，以为只会调用渲染：S。这有点hack还是正确的方法？您可以发布它以便我将其标记为正确答案吗？再次感谢

【参考方案1】：

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

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

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

我认为在 getChildContext 中调用 RowStore.getAllRows() 的原始方法的问题在于它只被调用一次。没有什么会迫使它在每次更改时调用 RowStore.getAllRows()。

但是，通过使用状态，您可以使用 Flux 概念在每次更新时“强制”更改状态，这将反映在上下文中。