使用React useContext实现计数器时出现TypeError object undefined报错如何解决

报错触发原因 #

• 1. JSX语法规则要求React组件return语句只能返回单个根节点，你当前Counter组件的return中，<h2>元素和注释掉的button元素属于同级并列结构，没有外层容器包裹，不符合语法要求。
• 2. Context取值异常：你创建CountContext时没有传入默认值，如果你调用Counter组件的上层没有被你定义的CountProvider包裹的话，useContext(CountContext)会返回undefined，此时尝试解构count和setCount会直接抛出报错。

修复方案 #

1. 调整Counter组件的JSX结构，用Fragment（简写<></>）包裹所有返回内容，解开注释的按钮代码即可正常使用计数功能，代码示例：

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(prev => prev + 1);
        }}
      >
        Count + 1
      </button>
    </>
  );
};

2. 在上层组件中用CountProvider包裹所有需要用到CountContext的组件，示例如下：

import CountProvider from './context/Count'
import { Counter } from './components/counter'

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

内容的提问来源于stack exchange，提问作者MestreALMO