Функция карты возвращает неопределенное - PullRequest
Новая
       6

Функция карты возвращает неопределенное

0 голосов
/ 10 февраля 2020

Я получаю undefined в моем приложении = TypeError: Невозможно прочитать свойство 'map' из undefined и мой console.log (мультфильмы), и я не знаю, в чем проблема. я передаю реквизит правильный путь или я неправ? пожалуйста, помогите :(

это мой список карт. js файл 

import React, { Fragment } from 'react';
import Card from '../components/Card';


const Cardlist = ({ cartoons }) => {
   console.log(cartoons);
    return (
        <Fragment> 
            {
                cartoons.map((user, i) => {
                    return (
                        <Card 
                            key={i}
                            id={cartoons[i].id} 
                            name={cartoons[i].name}
                            email={cartoons[i].email}
                        />
                    ); 
                })
            }
        </Fragment>
    );
};

export default Cardlist;

это тоже мои мультфильмы. js файл 

export const cartoons = [
  {
    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'
  },
];

Ответы [ 3 ]

0 голосов
/ 10 февраля 2020

функция карты требует данных типа array.cartoons переменная кажется пустой или не массив данных, а тип данных присваивает пустой массив, если его значение равно нулю или не определено.

0 голосов
/ 10 февраля 2020

вы можете попробовать это с шаблоном контейнера для лучшей практики:

cartoonDb. js

// cartoonDb.js
export const cartoons = [
  {
    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'
  },
];

CardListContainer. js

// CardListContainer.js

import React from './CardList';
import CardList from './CardList';
import {cartoons} from './cartoonDb';

export default class CardListContainer extends React.Component {
  render() {
    return <CardList cartoons={cartoons} />
  }
}

CardList. js

// CardList.js
import React from './CardList';

export default const CardList = ({ cartoons }) => (
 <div className="cardList">
    {cartoons.map(cartoon => (
       <Card 
         key={cartoon.id}
         name={cartoon.name}
         email={cartoon.email}
       />
    ))}
  </div>
);
0 голосов
/ 10 февраля 2020

В вашем коде cartoons[0] не определено.

При использовании функции карты индекс массива начинается с 0.

Вы можете использовать cartoons[i+1] или user.id.

Надеюсь, это поможет! 

cartoons.map((user, i) => {
                    return (
                        <Card 
                            key={i+1}
                            id={user.id}  
                            name={user.name} 
                            email={user.email} 
                        />
                    ); 
                })
...