1

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

React 版本：17.0.2 Storybook 版本：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 将其导入。该解决方案有效，但是这样，我必须创建许多无用的不必要文件。

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

在此先感谢，干杯，

4

0 回答 0