带有自定义分页的 React-slick 轮播

Question

• 我正在尝试使用react-slick实现轮播，我想要拥有我尝试使用react-slick自定义分页实现的缩略图。
• 正在从 dummyJson Api 获取数据，我只对显示感兴趣
• 以下是如何获取数据

    const [product, setProduct] = useState([]);

    useEffect(() => {
        let path = "https://dummyjson.com/products/1"
        axios.get(path)
            .then(res => {
                console.log(res)
                setProduct(res.products)
            })
            .catch(err => {
                console.log(err)
            })
    }, [])

• 下面是轮播组件

    const settings = {
        customPaging: function (i) {
            return (
                <a href='#/'>
                    <img src={image[i + 1].images} alt='kt' /> ###this line is where am getting the problem i think
                </a>

            );
        },
        dotsClass: "slick-dots slick-thumb",
        infinite: false,
        dots: true,
        slidesToShow: 1,
        arrows: false,
        slidesToScroll: 1,
        speed: 500,
        lazyLoad: 'progressive',
        initialSlide: 1
    };

这是我想要在应用程序中填充图像的方式

                                    <Slider {...settings}>
                                        {product.?images?.map(item => (
                                            <div key={item.id}>
                                                <img src={item} alt='gh' />
                                            </div>
                                        ))}
                                    </Slider>

• 正在从数据库中获取带有图像的数据，但图像未显示。

• 如有任何帮助，我们将不胜感激

Answer 1

重写

product?.images?.map

而不是

product.?images?.map

。