需要帮助让道具使用反应工作

Question

我正在构建这个 React 应用程序，但无法让 ID、姓名和电子邮件道具正常工作。我正在尝试从我的 robots.js 文件中随机抽取机器人图片、名称和电子邮件并将其显示在卡片上。任何帮助将不胜感激，这是我的代码

我不断收到此错误 TypeError: undefined is not an object (evaluating '_robots__WEBPACK_IMPORTED_MODULE_4__["robots"][0]')

这是 index.js 文件

    import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import Card from './Card';

    import { robots } from './robots';

    import * as serviceWorker from './serviceWorker';

    ReactDOM.render(

                    <div>

                      <Card id={robots[0].id} name={robots[0].name} email={robots[0].email} /> //it's saying this line of code is where the error is coming from

                      <Card id={robots[1].id} name={robots[1].name} email={robots[1].email} />

                      <Card id={robots[2].id} name={robots[2].name} email={robots[2].email} />

                    </div>

      , document.getElementById('root'));

    serviceWorker.unregister();

这是 robots.js 文件，我只粘贴了数组中的一些对象，以便您了解

    export const robots = [

      {

        id: 1,

        name: 'Leanne Graham',

        username: 'Bret',

        email: '[e-mail]'

      },

      {

        id: 2,

        name: 'Ervin Howell',

        username: 'Antonette',

        email: '[e-mail]'

      },

      {

        id: 3,

        name: 'Clementine Bauch',

        username: 'Samantha',

        email: '[e-mail]'

      },

    ];

这是 Card.js 文件

    import React from 'react';

    import 'tachyons';

    const Card = ({name, email, id}) =>{

      return(

        <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">

          <img alt='robots' src={'https://robohash.org/${id}?200x200'} />

          <div>

            <h2>{name}</h2>

            <p>{email}</p>

          </div>

        </div>

      );

    }

    export default Card;