Question

我正在做一个简单的任务。我正在学习Javascript。我有一个简单的数组，我想调用它或将信息显示为卡。

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'
  },
  {
    id: 4,
    name: 'Patricia Lebsack',
    username: 'Karianne',
    email: 'Julianne.OConner@kory.org'
  },
  { 
    id: 5,
    name: 'Chelsey Dietrich',
    username: 'Kamren',
    email: 'Lucio_Hettinger@annie.ca'
  }, 
];

card.js

import React from 'react';

const Card =(props)=>{
    const {name,email,id}=props;
    
    return( 
    
        <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
        <img alt='robots' src={`https://robohash.org/${id}?200*200`}/>
        <h2>{name}</h2>
        <p>{email}</p>
        </div>      
        );
}
export default Card;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Card from './Card'
import * as serviceWorker from './serviceWorker';
import 'tachyons';
import { robots } from './robots';


ReactDOM.render(
    <div>
  <Card id={robots[0].id} name={robots[0].name} email={robots[0].email}/>
  <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();

它编译成功，但是输出显示：

TypeError: Cannot read property '0' of undefined

我该怎么办？

为什么无法读取未定义的属性“ 0”

0 个答案: