反应上下文返回未定义

阿努巴夫达斯

我想在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。导入是正确的。除了导入错误外，还有其他原因吗？

反应版本： 16.9.0

文科夫斯基

如果您查看此工作代码和框，您会发现您的代码是正确的，并且在一切正常的情况下应该可以正常工作。

使其无法工作的原因

也许您输入的是错误的？请检查您如何导入。
也许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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。