反应上下文返回未定义

Question

我想在 React 中使用上下文将身份验证信息传递给子组件。我的上下文提供程序位于一个名为 AuthContext.js 的文件中：

import React, { Component, createContext } from 'react';

export const AuthContext = createContext();

class AuthContextProvider extends Component {
    state = {
        isAuthenticated: false
    };
    toggleAuth = () => {
        this.setState({ isAuthenticated: !this.state.isAuthenticated });
    };
    render() {
        return (
            <AuthContext.Provider value={{...this.state, toggleAuth: this.toggleAuth}}>
                {this.props.children}
            </AuthContext.Provider>
        );
    }
}

export default AuthContextProvider;

但是当我从子组件访问上下文时，它返回undefined

import { AuthContext } from "../contexts/AuthContext";

export default function ButtonAppBar() {
    return(
        <AuthContext.Consumer>{(authContext) => {
            console.log(authContext);
        }}</AuthContext.Consumer>
    );
}

在查看了 React Developer Tools 之后，我发现 ButtonAppBar 不在 AuthContextProvider 中。导入是正确的。除了导入错误之外还有什么原因吗？

React 版本： 16.9.0

Answer 1

如果您查看此working codesandbox，您会发现您的代码是正确的，并且如果您一切正常，应该可以正常工作。

使其无法正常工作的原因

• 可能你导入错误了？请检查您的导入方式。
• 可能ButtonAppBar 不在AuthContextProvider 内。

为了使上下文起作用，消费者需要在提供者内部。

这会起作用

  <AuthContextProvider>
    <ButtonAppBar /> {// consumer inside the provider }
  </AuthContextProvider>

这行不通

  <AuthContextProvider>
      ...
  </AuthContextProvider>
  <ButtonAppBar /> {// consumer outside the provider }

在问题的屏幕截图中，您没有 AuthContextProvider 包装路线，因此您将永远无法获得上下文。

您没有正确提供代码，但我猜您需要做的是

<App>
    <AuthContextProvider> {// AuthContextProvider wrapping routes so you can get the context}
        <BrowserRouter>
            ...
        </BrowserRouter>
    </AuthContextProvider>
</App>

Answer 2

关闭我的朋友。您的子组件正在执行 anónimo us 函数，并且该回调由浏览器执行，如果您 console.log this 您将看到这是 window 并且您可以想象 window 没有该功能