创建一个更高阶的组件，以便能够执行加载器。 我解释一下，我有一个组件，它执行对 JSON api 的获取，但我希望在加载时卡片不出现，这是一条显示正在加载的消息...

我已经在卡片组件中进行了此验证，但我希望它是动态的，并且能够在用户卡片中重复此逻辑

附加组件代码及其验证

import React, { Component } from 'react';
import Axios from 'axios';
import Cards from '../Molecules/Cards';
import whithLoader from "../HOC/whitLoeader"

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 className="ed-grid m-grid-3">

            {courses.length===0 ?
                <h1>Cargando...</h1> :
                courses.map(u =>        //Validation for Loading message
                                <Cards
                                key={u.id}
                                title={u.title}
                                description={u.description}
                                image={u.image}
                                email={u.email}
                                price={u.price}
                                />)

            }
            </div>
            </>
        )
    }
}

export default whithLoader(Axios_cards);

高阶组件：

import React, { Component } from 'react'; //Se tiene que importar React

const withLoader = (WrappedComponent) => { //Esto se tiene que crear de esta maneraa
    return class whithLoader extends Component{
        constructor(props) { //Se tiene que crear un metodo constructor que reciba las props
            super(props)
        }
        render() {
            console.log(this.props);
            return <WrappedComponent {...this.props} />
        }
    }
}
export default withLoader;

这就是为什么我需要能够访问 CardsGrid 中的变量“courses”。能够将消息加载的逻辑放在 HOC 中

我尝试这样做：

const withLoader = (WrappedComponent) => { //Esto se tiene que crear de esta maneraa
    return class whithLoader extends Component{
        constructor(props) { //Se tiene que crear un metodo constructor que reciba las props
            super(props)
        }
        render() { 
            //I want to get the length of the array, so that when it is being requested and 0 is 
           //displayed Loading ...
            return this.props.courses.length === 0 ? <h1>Loading...</h1> : <WrappedComponent {...this.props} />
        }
    }
}

但是...：消息错误

TypeError: Cannot read property 'length' of undefined
whithLoader.render
src/Components/HOC/whitLoeader.js:10
   7 |         }
   8 |         render() {
   9 |             
> 10 |             return this.props.courses.length === 0 ? <h1>Loading...</h1> : <WrappedComponent {...this.props} />
  11 |         }
  12 |     }
  13 | }