Storybook throws error: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Question

我使用 https://tsdx.io 创建了一个 React 库并选择了 React + TypeScript + Storybook 模板。

完整代码在这里 → https://github.com/deadcoder0904/react-typical

我收到这个错误：

undefined is not iterable (cannot read property Symbol(Symbol.iterator)) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at __read (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:177373:46) at __spread (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:177391:24) at http://localhost:6006/main.c9781e3a7458a3b52f4d.bundle.js:77:127 at commitHookEffectListMount (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:140995:26) at commitPassiveHookEffects (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:141033:11) at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:121452:14) at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:121501:16) at invokeGuardedCallback (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:121556:31) at flushPassiveEffectsImpl (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:144117:9) at unstable_runWithPriority (http://localhost:6006/vendors~main.c9781e3a7458a3b52f4d.bundle.js:170649:12)

不确定如何摆脱它？

我的故事书文件ReactTypical.stories.tsx很简单：

import React from 'react';
import { ReactTypical, Props } from '../src';

export default {
  title: 'Basic',
  steps: [
    'Hey',
    5000,
    'you',
    5000,
    'have',
    5000,
    'a',
    5000,
    'blessed',
    5000,
    'day',
  ],
  loop: Infinity,
};

// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props: Props) => <ReactTypical {...props} />;

有人有什么想法吗？

Answer 1

我找到了答案。原来 steps 变量在 Storybook 中是 undefined 并且在 examples/ 文件夹中的示例中运行良好，所以我更改了 Storybook 代码。

ReactTypical.stories.tsx

import React from 'react';
import { ReactTypical, Props } from '../src';

export default {
  title: 'Basic',
};

export const Default = (props: Props) => {
  return (
    <ReactTypical
      {...props}
      steps={[
        'Hey',
        500,
        'you',
        500,
        'have',
        500,
        'a',
        500,
        'blessed',
        500,
        'day',
      ]}
    />
  );
};

Storybook throws error: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Storybook throws error: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

javascript

iterator

typescript

reactjs

storybook

ReactTypical.stories.tsx