卡清单未定义no-undef

Question

I made cardList and want to add card into cardlist through map but this error appears

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

You are getting Cardlist is not defined because you didn't export it properly.

export default CardList;

should become

export default Cardlist;

Answer 2

You have defined your component with name Cardlist and exported with CardList , a typo here. Your export should be this,

export default Cardlist

Also, by the time your component mounts, your robots array might not contain data and it fails.

You should always check if data present,

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

Note: If you already iterating over array and taking each element into user then you can directly use user to get data.

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