故事书引发错误：未定义是不可迭代的（无法读取属性Symbol（Symbol.iterator））

Question

我已经使用https://tsdx.io制作了一个React库，并选择了React + TypeScript + Storybook模板。

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

我收到此错误：

undefined是不可迭代的（无法读取属性Symbol（Symbol.iterator）） TypeError：undefined是不可迭代的（无法读取属性Symbol（Symbol.iterator）） 在__read（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：177373：46） 在__spread（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：177391：24） 在http：// localhost：6006 / main.c9781e3a7458a3b52f4d.bundle.js：77：127 在commitHookEffectListMount（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：140995：26） 在commitPassiveHookEffects（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：141033：11） 在HTMLUnknownElement.callCallback（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：121452：14） 在Object.invokeGuardedCallbackDev（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：121501：16） 在invokeGuardedCallback（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：121556：31） 在flushPassiveEffectsImpl（http：// localhost：6006 / vendors〜main.c9781e3a7458a3b52f4d.bundle.js：144117：9） 处在stable_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',
      ]}
    />
  );
};