反应上下文返回未定义

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开发工具后，我发现ButtonAppBar不在AuthContextProvider内部。导入是正确的。除了导入错误，还有其他原因吗？

反应版本： 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ónimous函数，并且该回调操作已由浏览器执行，如果您console.log这个日志，您将看到这是window，并且您可以想象window没有该功能