React useContext全局状态搭建报错：store.getState is not a function

你遇到的这个错误核心原因很明确：你在组件里错误地将useContext获取到的上下文对象当成了Redux风格的store来使用——你的全局状态是基于useState+useContext实现的，上下文提供的value是包含context（状态值）和setContext（更新方法）的对象，根本没有getState方法。

正确获取全局状态的方式 #

在需要使用全局状态的组件中，通过useContext获取上下文后，直接访问context属性即可拿到状态，不需要调用getState：

import { useContext } from 'react';
import GlobalContext from './app/store';

function SomeComponent() {
  // 获取上下文对象
  const { context, setContext } = useContext(GlobalContext);

  // 直接使用context里的状态
  console.log(context.somedata);

  // 更新状态的示例
  const updateData = () => {
    setContext({
      ...context,
      somedata: [...context.somedata, 'new item']
    });
  };

  return <div>{context.somedata.join(', ')}</div>;
}

排查要点 #

• 检查你调用store.getState()的组件代码，确认是不是误把useContext返回的对象当成了Redux store。
• 确保所有使用全局状态的组件都正确从GlobalContext中解构context和setContext，而不是尝试调用Redux风格的方法。

额外建议 #

如果你的项目后续状态逻辑变复杂，考虑引入Redux、Zustand或Jotai这类专门的状态管理库，但当前基于useState+useContext的实现本身是没问题的，只要别混用不同状态管理方案的API就行。

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