反应上下文 returns 未定义

Question

我想在 React 中使用 context 将身份验证信息传递给子组件。我的上下文提供程序位于名为 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;

但是当我从子组件访问上下文时，它 returns 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>

反应上下文 returns 未定义

React context returns undefined

javascript

reactjs

react-context

无法正常工作的原因