Реагировать js не распознает меня метод карты - PullRequest
Новая
       86

Реагировать js не распознает меня метод карты

1 голос
/ 09 февраля 2020

Engli sh не является моим родным языком, но я постараюсь понять себя как можно лучше.

В компоненте axios_cards я делаю раздачу по топору ios в API json и я назначаю другому компоненту список объектов как свойство 

import React, { Component } from 'react';
import axios from 'axios';
import CardsGrid from "../Pages/CardsGrid"

class Axios_cards extends Component {

    constructor(props) {

        super(props)
        this.state = {
            courses : []
        }      
    }

    componentDidMount() {
        axios.get('http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
        .then(response => this.setState({
                courses: response.data
            }))
    }
    render() {
        const {courses} = this.state
        return <CardsGrid courses={courses}/>
    }
}

export default Axios_cards;

Но в компоненте, которому я назначаю свойства, он не распознает массив и не позволяет отображать список 

import React from 'react';
import Cards from "../Molecules/Cards"

const CardsGrid = ({courses}) => (
    <div className="ed-grid m-grid-3">
            {
            courses.map( e => 
                <Cards 
                id={e.id} 
                title={e.title} 
                description={e.description}
                image={e.image}
                price={e.price}
                key={e.id}  
                />)
            }
        </div>
)

export default CardsGrid;

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

TypeError: Cannot read property 'map' of undefined
CardsGrid
src/Components/Pages/CardsGrid.jsx:5
  2 | import Cards from "../Molecules/Cards"
  3 | 
  4 | const CardsGrid = ({courses}) => (
> 5 |     <div className="ed-grid m-grid-3">
  6 |             {
  7 |             courses.map( e => 
  8 |                 <Cards

1 Ответ

3 голосов
/ 09 февраля 2020

Что если ваш response.data имеет значение null или не является массивом?

Это должно разрешить его 

<div className="ed-grid m-grid-3">
            {
            Array.isArray(courses)? courses.map( e => 
                <Cards  
                id={e.id} 
                title={e.title} 
                description={e.description}
                image={e.image}
                price={e.price}
                key={e.id}  
                />) : null
            }
        </div>
...