useContext () возвращает неопределенное - PullRequest
Новая
       46

useContext () возвращает неопределенное

0 голосов
/ 18 февраля 2020

Я сталкиваюсь с проблемой, которая очень расстраивает, и я не могу понять, что происходит. У меня есть простой контекст, как показано здесь: 

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 в контексте возвращает undefined. Так что где-то должна быть какая-то ошибка, но я изо всех сил пытаюсь ее найти.

Любая помощь будет принята с благодарностью! :)

1 Ответ

2 голосов
/ 18 февраля 2020

Вы импортируете AppStateContextProvider

изменить import AppStateContext from "../contexts/AppStateContext";

на import { AppStateContext } from "../contexts/AppStateContext";

...