Question

我遇到了一个非常令人沮丧的问题，我不知道发生了什么。我有一个简单的上下文，如下所示：

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;

我也将我的应用包装在提供者中：

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")
);

我在这里使用上下文：

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。这两个控制台日志的输出是这样的：

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将返回未定义。因此，某处肯定有一些错误，但我正在努力寻找它。

任何帮助将不胜感激！：）

Answer 1

您正在导入AppStateContextProvider

更改import AppStateContext from "../contexts/AppStateContext";

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

useContext（）返回未定义

1 个答案: