Reactjs 在故事书中使用addDecorator'；s preview.ts抛出的渲染挂钩数比上一次渲染时多

阅读COLORIC部分的资源加载文档

主要是想在渲染故事之前加载我们的字体。解决方案建议使用

addDecorator

，其中使用一个简单的

FC

我们可以预加载字体，一旦加载，它就可以使用

story（）

呈现故事

查看

预览.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();
  });
}

由于某些原因，当违反以下规则时，这会引发常见错误：

渲染的钩子比上一次渲染期间的钩子多


到目前为止我所尝试的：

我主要尝试删除呈现故事的
useffect
：

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

错误也消失了，但是字体造成了与之前截图测试不一致的更改

问题：

我真的没有看到任何违反
addDecorator
添加的
FC
的问题

有什么能让这个错误消失吗？我愿意接受任何建议。也许我错过了什么，谢谢
 解决我们这边问题的主要方法是从
main.ts
中删除一个名为
@storybook/addon knobs
的
插件

也从
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 />
  },
]

export const decorators=[
故事=>{
const[isLoadingFonts，setIsLoadingFonts]=useState（true）
useffect（（）=>{
const call=async（）=>{
等待document.fonts.load（'1em Roboto'）
setIsLoadingFonts（错误）
}
调用（）
}, [])
返回isLoadingFonts？字体正在加载…：
},
]

我们放弃使用
addDecorator
，并将其用作导出的
const decorator
，如上所述