React - 在 componentDidMount 中访问上下文

Posted 2023-04-14

【中文标题】React - 在 componentDidMount 中访问上下文

【英文标题】：React - accessing context in componentDidMount

【发布时间】：2019-01-25 06:40:46

【问题描述】：

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

我现在有 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() 中更新是一种反模式。

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

【问题讨论】：

请参阅***.com/questions/49809884/… 以获得答案。

【参考方案1】：

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