卡列表未定义 no-undef

Question

我制作了卡片列表，并希望通过地图将卡片添加到卡片列表中，但出现了此错误

import React from 'react';
import Card from './Card';
const Cardlist = ({robots})=>{
const cardComponent = robots.map((user,i) => {
return <Card name = {robots[i].name} id ={robots[i].id} email = {robots[i].email} />
})
return (
<div>
{cardComponent}
</div>
);
}
export default CardList;

Answer 1

您正在获取 卡列表未定义，因为您没有正确导出它。

export default CardList;

应该成为

export default Cardlist;

Answer 2

您已使用名称Cardlist定义了组件，并使用CardList导出，此处为拼写错误。你的出口应该是这个，

export default Cardlist

此外，在组件装载时，robots数组可能不包含数据并失败。

您应该始终检查数据是否存在，

const cardComponent = robots && robots.length && robots.map((user,i) => {
return <Card name = {robots[i].name} id ={robots[i].id} email = {robots[i].email} />
})

注意：如果您已经遍历数组并将每个元素放入user那么您可以直接使用user来获取数据。

const cardComponent = robots && robots.length && robots.map((user,i) => {
return <Card name = {user.name} id ={user.id} email = {user.email} />
})