需要帮助让道具使用反应

Posted 2023-02-22

【中文标题】需要帮助让道具使用反应

【英文标题】：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: '[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;

【问题讨论】：

如果您也分享您的错误消息会很好

它也对我有用。

TypeError: undefined is not an object (evalating '_robots__WEBPACK_IMPORTED_MODULE_4__["robots"][0]')

这是我遇到的错误

你应该使用地图方法 ReactDOM.render()

【参考方案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】：

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