reactjs - 使用 useContext 时发生“TypeError object undefined”

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

我收到以下错误：

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

标签： reactjsuse-context

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