storybook 当控件被禁用时,浏览器控制台会显示React警告,

ljsrvy3e  于 4个月前  发布在  React
关注(0)|答案(5)|浏览(42)

描述bug

在使用 controls: {disable: true} 作为故事参数时,浏览器控制台会出现以下警告信息:

Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks:

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

重现方法

运行命令:npx sb@next repro
将 main.js 中的 "@storybook/addon-essentials" 替换为
"@storybook/addon-docs",
"@storybook/addon-controls",
"@storybook/addon-actions",
在 Button Story 的参数中添加 controls: {disable: true}
重新加载 Button story 页面并查看浏览器控制台。

系统环境

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
    Yarn: 2.4.2 - ~/.nvm/versions/node/v16.0.0/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-docs: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-essentials: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-links: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/node-logger: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/preset-create-react-app: ^3.1.7 => 3.1.7
    @storybook/react: ^6.4.0-alpha.11 => 6.4.0-alpha.11

额外背景信息

只有在导入 "@storybook/addon-docs", "@storybook/addon-controls" 和 "@storybook/addon-actions" 而不是 "@storybook/addon-essentials" 时,我才能重现这个bug。因此,只需导入 "@storybook/addon-essentials" 就可以作为解决方法。

mbzjlibv

mbzjlibv1#

我仅使用@storybook/addon-essentials,仍然看到错误。
运行Storybook 6.3.6。错误:

Warning: React has detected a change in the order of Hooks called by Tabs. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
sxissh06

sxissh062#

对于我来说,这仍然是一个问题。

"@storybook/addons" "6.4.20"
"@storybook/api" "6.4.20"
"@storybook/components" "6.4.20"
"@storybook/core-events" "6.4.20"
"@storybook/csf" "0.0.2--canary.87bc651.0"
"@storybook/theming" "6.4.20"
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",
kcugc4gi

kcugc4gi3#

看起来 $x_{@storybook/addon-actions}$ 是导致问题的原因。如果我从 $x_{addons-essentials}$ 插件中禁用它,它就不会再抛出这个错误。

$x_{

# main.js
addons: [
  {
    name: '@storybook/addon-essentials',
    options: {
      actions: false,
    },
  },
],

}$

9wbgstp7

9wbgstp74#

我在使用Storybook 6.5.14时遇到了相同的问题,controls: {disable: true}@storybook/addon-essentials上。
@orlando的修复方法虽然有效,但并不实用,因为这个操作是全局禁用的。

e5nqia27

e5nqia275#

遇到同样的问题(Storybook-html 6.5.14@storybook/addon-essentials)。尽管可以为单独的故事禁用操作,但全局禁用操作。只需将options: { actions: false }添加到您的故事参数中:

export default {
  title: 'Stories/myComponent,
  component: 'myComponent',
  parameters: { 
    options: { actions: false },
  }

cc @Cedric-ruiu

相关问题