Question

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

我不断收到此错误 TypeError：未定义不是对象（正在评估'_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: 'Sincere@april.biz'
      },
      {
        id: 2,
        name: 'Ervin Howell',
        username: 'Antonette',
        email: 'Shanna@melissa.tv'
      },
      {
        id: 3,
        name: 'Clementine Bauch',
        username: 'Samantha',
        email: 'Nathan@yesenia.net'
      },
    ];

这是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;

Answer 1

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>
        {robots.map(robot => <Card  key={robot.id} id={robot.id} name={robot.name} email={robot.email} />)}
    </div>
, document.getElementById('root'));

    serviceWorker.unregister();

Answer 2

这是我提供的工作示例

https://codesandbox.io/s/react-example-xr4sf

Answer 3

您应该在此处使用map方法来遍历对象

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>
           {robots.map(obj => <Card id={obj.id} name={obj.name} email={obj.email} />)}
                        </div>, document.getElementById('root'));

        serviceWorker.unregister();

Answer 4

我最终删除并重新下载了所有的React文件，现在包括我的原始代码在内的所有内容都可以正常使用

需要帮助使道具能够使用React工作

4 个答案: