React.useContext（） 不断返回未定义？

Question

我使用Next.js和React，使用react hooks +context来管理状态。但是，我遇到了这个问题，即使我在上下文对象中传递，返回值也未定义（或者我认为是这样）。我是否错过了一些非常明显的东西？发生了什么事情？React.useContext()

我已经在一个名为 CartContext 的 const 中创建上下文，然后在我的提供程序组件中，我创建了值对象并将其作为 prop 传递给 CartContext.Provider（请参阅下面的 ）。我确保上下文提供程序通过添加一个元素来包装我的组件，只是为了确保这一点。_app.js<h1>

问题似乎出现在 中。我已经从中导入了CartContext，然后将其作为参数传递给我应该做的，但它不断抛出这个错误：index.js./_app.jsuseContext()

“TypeError：无法取消结构属性'react__WEBPACK_IMPORTED_MODULE_0___default.a.useContext（...）'的第一个样本'，因为它是未定义的”

从我收集到的信息中告诉我，useContext（） 返回未定义。

_app.js（换行所有页面）

import React from 'react'

import '../styles/global.css';

import theme from '../components/customTheme';

import { ThemeProvider } from '@material-ui/core/styles';

const MyApp = props => {

  const { Component, pageProps, store } = props

  return (

    <ContextProvider>

      <ThemeProvider theme={theme}>

        <Component {...pageProps} />

      </ThemeProvider>

    </ContextProvider>

  )

}

// Context 

export const CartContext = React.createContext()

function ContextProvider({ children }) {

  const value = {

    firstSample: "Test",

    exampleFunction: () => {alert("Hello World")},

  }

  return (

    <CartContext.Provider value={value}>

      <h1>The provider works</h1>

      {children}

    </CartContext.Provider>

  )

}

export default MyApp;

Answer 1

好吧，所以这是一个非常简单的错误，我导入了，当它应该用大括号时，因为它不是默认的导出。因此，更正后的（功能性）代码很简单：CartContextindex.jsimport cartContex from _app.jsimport { cartContext } from _app.js

Answer 2

尝试像这样导入：import&nbsp;{&nbsp;CartContext&nbsp;}&nbsp;from&nbsp;'./_app';

Answer 3

你的代码有一些问题，我不明白你为什么坚持使用组件。createContext<MyApp />问题：在你正在做的组件中，我相信这是不可能的。MyAppexport default MyAppexport CartContext你没有，也许这就是返回的原因。请参阅文档中的示例createContextdefaultValueundefined我相信通过进行这些更改，您的代码应该可以正常工作，或者至少您可以随着问题的发展而发展。帮助代码和框会更容易。