gpt4 book ai didi

javascript - 故事书无法读取未定义的属性(读取 'type' )

转载 作者:行者123 更新时间:2023-12-05 00:32:25 25 4
gpt4 key购买 nike

我是 React 的新手,我现在正在尝试使用 Storybook。使用 npm run storybook 时遇到以下错误.我已经尝试弄清楚了,但我仍然不确定。
无法读取未定义的属性(读取“类型”)
TypeError:无法读取未定义的属性(读取“类型”)

at isMdx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3504:30)
at mdxToJsx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3508:8)
at jsxDecorator (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3545:19)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19890:12
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19939:14
at wrapper (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:7412:12)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10411:14
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10425:26
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21
vendors-node_modules 似乎有问题,但有谁知道如何解决这个问题?

最佳答案

TypeError: Cannot read properties of undefined (reading 'type')当定义 argTypes 时,故事书中会发生异常。在默认导出对象中,而不为每个参数类型定义“类型”。
本质上,故事书将查看每个 prop在您的 argTypes 中定义并尝试使用 type关闭它的属性:

export default {
title: 'Components/Video',
component: Video,
argTypes: {
title: { type: 'string', defaultValue: 'Why is type undefined?' }
}
};
解决方法:不要使用argTypes,除非你想定义每个prop类型;因此名称 argTypes .
或者,您可以省略 argTypes并且只有:
export default {
title: 'Components/Video',
component: Video
};
然后当你定义模板时:
const Template: ComponentStory<typeof Video> = (args: VideoProps) => <Video {...args} />;

export const Default = Template.bind({});
Default.args = {
title: 'Video Title'
};
如果你使用 TypeScript,Storybook 不仅有 ComponentStory<typeof Component>它还导出 ComponentMeta<typeof Component>类型。
与上面相同的解决方案,但完全是 TS:
import React from 'react';
import { Video } from './video';
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import type { VideoProps } from './video';

const video: ComponentMeta<typeof Video> = {
title: 'Components/Video',
component: Video,
argTypes: {
title: { type: 'string', defaultValue: 'Why is type undefined?' }
}
};

export default video;

const Template: ComponentStory<typeof Video> = (args: VideoProps) => <Video {...args} />;

export const Default = Template.bind({});
Default.args = {
title: 'Video Title'
};

关于javascript - 故事书无法读取未定义的属性(读取 'type' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71832486/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com