useContext() 返回未定义 [英] useContext() returns undefined

问题描述

我遇到了一个非常令人沮丧的问题，我无法弄清楚发生了什么.我有一个简单的上下文，如下所示:

I'm running into an issue which is super frustrating and I can't figure out whats going on. I have a simple context as shown here:

import React, { useState, createContext } from "react";

export const AppStateContext = createContext();

const AppStateContextProvider = props => {
  const [appState, setAppState] = useState({
    cartOpen: false
  });

  return <AppStateContext.Provider value={{ appState, setAppState }}>{props.children}</AppStateContext.Provider>;
};

export default AppStateContextProvider;

我还将我的应用程序包装在提供程序中:

I've also wrapped my App in the provider:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { deepPurple, amber } from "@material-ui/core/colors";
import AppStateContextProvider from "./contexts/AppStateContext";

const theme = createMuiTheme({
  palette: {
    type: "dark",
    primary: {
      main: deepPurple[400]
    },
    secondary: {
      main: amber[800]
    }
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <AppStateContextProvider>
      <App />
    </AppStateContextProvider>
  </ThemeProvider>,
  document.getElementById("root")
);

我正在这里使用上下文:

and I'm consuming the context here:

import React, { useContext } from "react";
import {
  Grid,
  Card,
  CardHeader,
  CardContent,
  CardActions,
  Divider,
  Container,
  AppBar,
  Toolbar,
  IconButton,
  Tooltip
} from "@material-ui/core";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import AppStateContext from "../contexts/AppStateContext";

const TopAppBar = props => {
  console.log("context: ", AppStateContext);
  console.log("useContext(context): ", useContext(AppStateContext));

  //   const { appState, setAppState } = useContext(AppStateContext);

  return (
      <AppBar>
      <Toolbar>
        <Tooltip title="View Cart">
          <IconButton>
            <ShoppingCartIcon />
          </IconButton>
        </Tooltip>
      </Toolbar>
    </AppBar>
  );
};

export default TopAppBar;

被注释掉的代码行会抛出错误，因为 useContext(AppStateContext) 是 undefined.两个控制台日志的输出是这样的:

The line of code that is commented out throws an error because useContext(AppStateContext) is undefined. The output of the two console logs are this:

context:  props => {
  const [appState, setAppState] = Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])({
    cartOpen: false
  });
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(App…
useContext(context):  undefined

如您所见，上下文看起来不错，但在上下文上调用 useContext 返回 undefined.所以一定有什么地方出错了，但我正在努力找到它.

As you can see, the context looks okay, but calling useContext on the context returns undefined. So there must be some mistake somewhere but I'm struggling to find it.

任何帮助将不胜感激！:)

Any help would be greatly appreciated! :)

推荐答案

您正在导入 AppStateContextProvider

change import AppStateContext from "../contexts/AppStateContext";

to import { AppStateContext } from "../contexts/AppStateContext";

这篇关于useContext() 返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！