反应无效的钩子调用错误和故事书6

Posted 2023-02-19

【中文标题】反应无效的钩子调用错误和故事书6

【英文标题】：React invalid hook call error and storybook 6

【发布时间】：2021-02-01 05:06:39

【问题描述】：

我所有的钩子都会导致 Invalid hook call 错误，这是在使用 npx sb init 安装故事书后发生的

import React from 'react'
import  useSectionsQuery  from "../../graphql/generated";
          
export const Home: React.FC = () => 
  const  data  = useSectionsQuery();
            
  return (
    <div className="bg-gray-200">
                  
    
      <div style= backgroundColor: "#4267B2"  className="grid grid-rows-1">
        <div className="flex justify-center">
          data?.sectionMany.map((section: any) => 
            return <Card ...section />;
          )
        </div>
      </div>
    </div>
  )

【参考方案1】：

我的解决方案：

我已从 package.json 中删除所有 storybook 依赖项； 我已经删除了 yarn.lock 文件和 node_modules 文件夹； 我已将 package.json 上的 react 和 react-dom 版本锁定为 16.13.1； 我在 package.json 中添加了以下分辨率：

  "resolutions": 
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  

我已经从我的 workspaces.nohoist 中删除了 react 依赖项 包.json; 我使用 npx sb init 从零开始安装 Storybook。

来自开发者的引述

@eric-burel 我们在 6.1 中对这些东西进行了修改，例如 #11628 并且还删除了也会导致大量依赖敏感性的 webpack DLL

阅读更多here

【参考方案2】：

对于那些带着 NextJS v10 和 Storybook v6 来到这里的人： Storybook 不支持 react v17，你可以通过运行检查不匹配的版本： npm ls react-dom 和 npm ls react。

Storybook 最近发布了一个修复此问题的测试版，您可以通过以下方式安装它： npx sb upgrade --prerelease

更多信息和对话在这里：https://github.com/storybookjs/storybook/issues/12408