ReactJS Ax ios Это не позволяет мне назначить массив как свойство

Question

У меня есть компонент React, в котором я выполняю прохождение осей к отдыху 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 : []
        }      
    }
//                              FIX ME

    componentDidMount() {
        Axios.get('https://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
        .then(response => this.setState({
                courses: response.data

        }))
    }
    render() {

        const { courses } = this.state
        return <div>
            {console.log(courses)}
        </div>
    }
}

export default Axios_cards;

Для проверки что если вы получите массив, я поставлю console.log. И я вижу, что если ARRAY получает меня:

Проблема возникает, когда я хочу присвоить массив другому компоненту через реквизиты:

render() {

        const { courses } = this.state
        return <CardsGrid courses= {courses} />
    }
}

Код присоединенного компонента, который получает реквизиты:

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

const CardsGrid = ({courses}) => (
    //FIX ME

    <div>
        {console.log(courses)}
    </div>
)

export default CardsGrid;

Файл console.log внутри CardsGrid возвращает мне: «undefined»

Почему компонент CardsGrid не распознает массив, назначенный через реквизиты?

Answer 1

Думаю, проблема в том, как вы выполняете деструктуризацию.

Если вы хотите, чтобы каждый элемент был в подпорке CardsGrid, я бы рекомендовал использовать .map с оператором распространения . Причина в том, что у вас есть массив объектов, и вы, вероятно, хотите, чтобы отдельные ключи каждого массива становились реквизитом для каждой карты (хотя ваш код не показывает, как это должно отображаться):

render() {
   // destructure all the courses from the state obj
   const { courses } = this.state
   return (
     // use fragments to offset your JSX return and eliminate useless <div>
     <>
       // Loop over your courses array with .map
       courses.map( (course) => {
         // ...course will spread each key into CardsGrid as a prop
         // each key's value will automatically be assigned to the prop
         <CardsGrid ...course />
       })
     </>
   )
}