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

Question

阅读来自 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。

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

Answer 1

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

也从 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 如上所述。

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

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

reactjs

storybook

chromatic