好的,我有这个轮播。我正在使用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}
/>
)
}
最佳答案
您忘记从galleryItems
返回checkImage.map
:
galleryItems() {
return (
this.state.brands.map((brand, i) => {
// ...
return checkImage.map((image, i) => (
<div key={`key-${i}`} className="card-img-top">...</div>
));
})
)
};
关于javascript - Reactjs:为什么轮播根本不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52691156/