Question

好吧，我有这个旋转木马。我正在使用AliceCarousel 而且我认为该逻辑是正确的，因为它仅过滤了collection_name === "images"

，但似乎没有被渲染。我没有收到任何错误，为什么？这是JSON结构，万一我忘记了一些东西。我正在尝试获取所有图像URL，并将其放入轮播中。请帮助我，我是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

您从return checkImage.map忘记了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

问题在于map中的第一个galleryItems不返回任何内容，因此galleryItems仅返回一个空数组。因此什么也没有呈现，也没有错误。

您可以这样更新它：

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>
            ));
        })
    )
};

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

2 个答案: