在 Storybook 的 preview.ts 中使用 addDecorator 抛出比上一次渲染期间渲染更多的钩子

Using addDecorator in Storybook's preview.ts throws Rendered more hooks than during the previous render

阅读来自 Chromatic 的资源加载文档,Solution B: Check fonts have loaded in a decorator 部分。

主要是想在渲染故事之前加载我们的字体。该解决方案建议使用 addDecorator,其中使用简单的 FC 我们可以预加载字体,一旦加载它们,它就可以使用 story().

渲染故事

查看 preview.ts 的建议装饰器:

import isChromatic from "chromatic/isChromatic";

if (isChromatic() && document.fonts) {
  addDecorator((story) => {
    const [isLoadingFonts, setIsLoadingFonts] = useState(true);

    useEffect(() => {
      Promise.all([document.fonts.load("1em Roboto")]).then(() =>
        setIsLoadingFonts(false)
      );
    }, []);

    return isLoadingFonts ? null : story();
  });
}

出于某种原因,这会在违反 Rules of Hooks:

时引发常见错误

Rendered more hooks than during the previous render

到目前为止我尝试过的:

主要是我试图删除呈现故事的useEffect

if (isChromatic() && document.fonts) {
  addDecorator((story) => {
    const [isLoadingFonts, setIsLoadingFonts] = useState(true);
   
    return story();
  });
}

错误也消失了,但字体导致我们的屏幕截图测试与以前不一致。

问题:

我真的没有看到任何问题会违反 addDecorator 添加的 FC 中的 Rules of Hooks

有什么办法可以使这个错误消失吗?我愿意接受任何建议。也许我在这里漏掉了什么,谢谢!

解决我们这边问题的主要方法是从 main.ts 中删除一个名为 @storybook/addon-knobsaddons

也从 preview.ts 重命名为 preview.tsx 并且使用的装饰器略有不同,如下所示:

export const decorators = [
  Story => {
    const [isLoadingFonts, setIsLoadingFonts] = useState(true)

    useEffect(() => {
      const call = async () => {
        await document.fonts.load('1em Roboto')

        setIsLoadingFonts(false)
      }

      call()
    }, [])

    return isLoadingFonts ? <>Fonts are loading...</> : <Story />
  },
]

我们放弃使用 addDecorator 并用作导出的 const decorators 如上所述。