需要帮助让道具使用反应答案

【问题标题】：need help getting props to work using react需要帮助让道具使用反应
【发布时间】：2020-01-19 05:54:51
【问题描述】：

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

我不断收到此错误 TypeError: undefined is not an object (评估 '_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;

【问题讨论】：

如果您也分享您的错误消息会很好
它也对我有用。
TypeError: undefined is not an object (evalating '_robots__WEBPACK_IMPORTED_MODULE_4__["robots"][0]')
这是我遇到的错误
你应该使用地图方法 ReactDOM.render()

标签： javascript reactjs jsx react-props

【解决方案1】：

这是我提供的一个工作示例

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

【讨论】：

【解决方案2】：

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();

【讨论】：

TypeError: undefined is not an object (evalating '_robots__WEBPACK_IMPORTED_MODULE_4__["robots"].map')
不知道为什么。复制时似乎一切正常：CodeSandbox
我删除并重新下载了所有的 react 文件，现在包括我的原始代码在内的所有内容都可以正常工作

【解决方案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();

【讨论】：

【解决方案4】：

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

【讨论】：