1

我是第一次使用 Context API，我在理解如何在生命周期方法中更新上下文时遇到了一些困难。我查看了官方文档和这个答案，这很有意义，但对我找到解决方案没有多大帮助。

我现在有 2 个组件：一个父母和一个孩子。

在父级中，我在 componentDidMount() 中使用 axios get() 请求来获取数据。

孩子使用上下文来呈现元素，因此一旦请求完成，它就需要更新的上下文。

我的主要问题是一旦收到 axios 响应，我就无法找到更新提供程序状态的位置。理想情况下，我想将 axios 响应分配给提供者状态，但我不知道如何从那里访问上下文。

我通过将 axios 响应分配给父状态然后通过我的 Provider 的处理程序更新上下文提供程序状态并在我的 Consumer 下的 render() 中调用此处理程序来使其“工作”，因为这是我相信我拥有的唯一地方访问上下文：

class ParentComponent extends Component {
    render() {
        return (
            <MyContext.Consumer>
                {(context) => {
                    if(axiosSuccess) {context.updateContextState(parentState);}
                    return (
                        <ChildComponent/>
                    )
                }}
            </MyContext.Consumer>
        );
    }
}

但是我知道这不是正确的实现，因为在 render() 中更新是一种反模式。

在生命周期方法中更新提供者状态的最佳方法是什么？

4

1 回答 1

-1

使用上下文与通常的 state/props/redux 用法没有太大区别。从上下文传递处理程序（除了值）与从父级（通过道具）相同的方式。将整个获取移动到上下文（组件）或至少传递处理程序以更新状态。toggleTheme在文档中查看。

于 2018-08-18T13:33:44.663 回答