javascript - 为什么无法读取未定义的属性“0”
问题描述
我正在做一个简单的任务。我正在学习 Javascript。我有一个简单的数组,我想调用它或将信息显示为卡片。
机器人.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'
},
];
卡片.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
我应该怎么办?
解决方案
推荐阅读
- c++ - 执行 operator>> 时出错:C++ no operator 与这些操作数匹配,操作数类型为:std::istream >> const double error
- python - Pdoc 将类信息添加到每个枚举变量
- android - 如何正确地将 PorterDuff.Mode.MULTIPLY 应用于 onDraw() 中的可绘制矢量;
- java - 如何在 Java 中从数组中的特定索引向下计数?
- javascript - 动态创建 web 组件
- python - 如何在循环中删除 '\r' 以读取 python 中的文件
- macos - MacOS - NSWindowController 在导出后未加载 NSViewController
- c++ - 如何重载 std::cout << std::endl?
- python - 如何使 .counts 返回 2 个计数而不是 1
- java - SignalR Java 客户端是否支持 TLS 1.2?