"TypeError object undefined" 使用 useContext 时发生

Question

我正在测试 useContext，但我收到一个错误，我不明白如何修复它，应用程序的想法是每次使用 useContext 创建一个计数器按下按钮计数器加一。

我创建了一个计数器组件：

import { useContext } from "react";

import { CountContext } from "../../context/Count";

export const Counter = () => {
  const { count, setCount } = useContext(CountContext);

  return (
    <h2>Counter: {count}</h2>

    // <button
    //   onClick={() => {
    //     setCount(count + 1);
    //   }}
    // >
    //   Count + 1
    // </button>
  );
};

这正在调用以下上下文：

import { createContext, useState } from "react";

export const CountContext = createContext();

export default function CountProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

我收到以下错误：

我不知道是什么导致了错误，我制作了一个 codesandbox 来显示问题：https://codesandbox.io/s/usecontext-error-mwgwt?file=/src/components/counter/index.js

Answer 1

您还没有将 Counter 组件包装在 CountProvider 中。

您的 App.js 应如下所示：

import { Counter } from "./components/counter";
import CountProvider from "./context/Count";
import "./styles.css";

export default function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

"TypeError object undefined" 使用 useContext 时发生

"TypeError object undefined" happening when using useContext

reactjs

use-context