通过 Storybook 使用 React 的 useContext

问题描述

我正在尝试通过故事书访问 contextAPI 中的数据，但我无法管理它。 请记住，原始页面没有任何问题，上下文工作正常。

反应版本：17.0.2 故事书版本：6.2.7 这是 devDep：

"devDependencies": {
    "@storybook/addon-actions": "^6.2.7","@storybook/addon-essentials": "^6.2.7","@storybook/addon-links": "^6.2.7","@storybook/node-logger": "^6.2.7","@storybook/preset-create-react-app": "^3.1.7","@storybook/react": "^6.2.7","eslint-config-react-app": "^6.0.0","eslint-plugin-prettier": "^3.3.1","eslint-plugin-react": "^7.23.1","eslint-plugin-react-hooks": "^4.2.0","node-sass": "^5.0.0","prettier": "^2.2.1","sass": "^1.32.8"
}

我在 Storybook 的 preview.js 文件中为包装器添加了一个装饰器。

addDecorator((storyFn) => <GlobalStore>{storyFn()}</GlobalStore>);

然后，在 X.stories.js 中，我尝试像往常一样调用 useContext：

import { GlobalContext } ...
import { useContext } ...

export const SampleStory = () => {
const { Variable } = useContext(GlobalContext);

但我在故事中遇到了这个错误：

Cannot read property 'Variable' of undefined

作为解决方案，我创建了一个新组件作为新的/分离的文件，并通过 X.stories.js 导入它。此解决方案有效，但以这种方式，我必须创建大量无用的不必要文件。

你能告诉我解决这个问题的正确方法吗？

提前致谢，干杯，

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）