Javascript React js无法识别me映射方法

英语不是我的母语，但我会尽力让自己尽可能地理解

在axios_cards组件中，我正在通过axios获取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，{Component}来自'React'；
从“axios”导入axios；
从“./Pages/CardsGrid”导入CardsGrid
Axios_类卡扩展组件{
建造师（道具）{
超级（道具）
此.state={
课程：[]
}      
}
componentDidMount（）{
axios.get（）http://my-json-server.typicode.com/jee4nc/myjsonserver/lista')
.then（response=>this.setState({
课程：响应。数据
}))
}
render（）{
const{courses}=this.state
返回
}
}
导出默认Axios_卡；

但在我分配属性的组件中，它无法识别数组，也不允许我映射列表

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;

从“React”导入React；
从“./分子/卡片”导入卡片
const CardsGrid=（{courses}）=>(
{
课程地图（e=>
)
}
)
导出默认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 

TypeError:无法读取未定义的属性“map”
卡兹格里德
src/Components/Pages/CardsGrid.jsx:5
2 |从“./分子/卡片”导入卡片
3 | 
4 | const CardsGrid=（{courses}）=>(
> 5 |     
6 |             {
7 |课程地图（e=>
8 |如果您的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>


{
Array.isArray（courses）？courses.map（e=>
)：null
}
如果您的response.data为空或不是数组怎么办

这应该可以解决问题

<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>


{
Array.isArray（courses）？courses.map（e=>
)：null
}
添加您告诉我的代码，虽然它修复了错误，但它不再显示卡。可能是因为使用axios的get没有返回数组吗？@Jee4nc确切地说，一旦它成为数组，它将显示卡，处理响应。数据将成为数组。在axios_卡组件中，我使用componentdidmount使通过访问json服务器请求并将值分配给props，但它仍然不会将其作为数组接收。从axios_Cards代码中可以看到，是否存在错误？因为我相信，通过您给我的验证，错误就存在了。提前感谢添加您告诉我的代码，尽管它修复了错误，但它不再显示错误ows卡。可能是因为axios的get没有返回数组吗？@Jee4nc确切地说，一旦它成为数组，它就会显示这些卡，并将response.data处理为数组。在axios_卡组件中，我使用componentdidmount通过访问json服务器并将值分配给props来发出请求，但它仍然存在ll不会以数组的形式接收。从axios_卡代码中可以看到，是否存在错误？因为我相信通过您给我的验证，错误就在那里。请提前感谢