React.useState触发TypeError: resolveDispatcher() is null报错求助

常见原因及解决步骤 #

1. 排查React版本冲突或重复安装 #

• 执行 npm list react react-dom 或 yarn list react react-dom，查看是否存在多版本React共存的情况（Storybook与主项目依赖版本不一致常引发此问题）。
• 若发现重复版本，在项目根目录package.json中添加版本强制统一配置：

  // package.json
  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
  

• 清理旧依赖后重新安装：rm -rf node_modules package-lock.json yarn.lock && npm install，再重建Docker镜像。

2. 确保组件在React上下文内渲染 #

• 检查Storybook配置，确认组件被正确包裹在React上下文环境中。在.storybook/preview.js中添加基础渲染包裹：

  import React from 'react';
  
  export const decorators = [
    (Story) => <Story />
  ];
  

  避免装饰器破坏React的渲染上下文。

3. 清理Docker构建缓存 #

• 修改Dockerfile，确保构建时强制重新安装依赖：

  RUN rm -rf node_modules && npm install
  

• 构建镜像时禁用缓存：docker-compose build --no-cache，避免复用旧的依赖缓存层。

4. 检查Hook调用合规性 #

• 确认foo.tsx中useState的调用处于函数组件顶层，没有在条件判断、循环或嵌套函数内调用（违反React Hook规则会引发此类错误）。从报错代码看，需确保第151行的useState不在第149行的条件块内部。

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