Reactjs：为什么“轮播”根本不显示？

Question

Ok so, I have this carousel. I am using AliceCarousel and I think that the logic is right because it filters just the ones with the collection_name === "images"

but it doesn't seem to be getting rendered. I am not receiving any errors so why? this is the JSON structure, in case that I have forgotten something. I am trying to get all the image URLs and make it into a carousel. please help me, I am new to Reactjs.

galleryItems() {
    return (
        this.state.brands.map((brand, i) => {
            var checkImage = brand.media.length === 0 ? [] : brand.media.filter((media) => media.collection_name === "images");
            console.log('henlos',checkImage)
            checkImage.map((image, i) => (
                <div key={`key-${i}`}  className="card-img-top"><img src={image.url} /></div>
            ));
        })
    )
};

render(){
    const items = this.galleryItems();
    const responsive = {
        0: { items: 2 },
        600: { items: 2 },
        1024: { items: 2 }
    };

    return (
        <AliceCarousel 
            items = {items}
            mouseDragEnabled 
            responsive={responsive}
            buttonsDisabled={true}
            dotsDisabled={true}
        />
    )
}

Answer 1

You've forgot to return checkImage.map from galleryItems :

galleryItems() {
    return (
        this.state.brands.map((brand, i) => {
            // ...
            return checkImage.map((image, i) => ( 
                <div key={`key-${i}`} className="card-img-top">...</div>
            ));
        })
    )
};

Answer 2

The issue is that the first map inside galleryItems does not return anything, so galleryItems just returns an empty array. Thus nothing is rendered, but also no errors.

You can update it like this:

galleryItems() {
    return (
        this.state.brands.map((brand, i) => {
            var checkImage = brand.media.length === 0 ? [] : brand.media.filter((media) => media.collection_name === "images");
            console.log('henlos',checkImage)
            return checkImage.map((image, i) => (
                <div key={`key-${i}`}  className="card-img-top"><img src={image.url} /></div>
            ));
        })
    )
};