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 { CartContext } from './_app';

Answer 3

你的代码有一些问题，我不明白你为什么坚持使用组件。createContext<MyApp />

问题：

• 在你正在做的组件中，我相信这是不可能的。MyAppexport default MyAppexport CartContext

• 你没有，也许这就是返回的原因。请参阅文档中的示例createContextdefaultValueundefined

我相信通过进行这些更改，您的代码应该可以正常工作，或者至少您可以随着问题的发展而发展。

帮助代码和框会更容易。