React-slick自定义分页轮播问题：DummyJSON API图片无法显示

1. 数据获取逻辑错误 #

DummyJSON的/products/1接口返回的是单个产品对象，而非数组，且axios请求的响应数据存储在res.data中，不是res.products。

修正后的数据获取代码：

const [product, setProduct] = useState({}); // 初始值改为空对象，匹配接口返回结构

useEffect(() => {
    const path = "https://dummyjson.com/products/1";
    axios.get(path)
        .then(res => {
            setProduct(res.data); // 正确取响应体数据
        })
        .catch(err => {
            console.error(err);
        });
}, []);

2. 自定义分页（customPaging）的错误 #

• 未定义image变量，需使用已获取的product.images
• 索引i从0开始，直接取product.images[i]即可，无需i+1
• product.images的每一项是图片URL字符串，不是带images属性的对象，直接用URL作为src

修正后的轮播配置：

const settings = {
    customPaging: function (i) {
        // 先判断数据是否加载完成，避免报错
        if (!product.images) return null;
        return (
            <a href='#/'>
                <img src={product.images[i]} alt='缩略图' />
            </a>
        );
    },
    dotsClass: "slick-dots slick-thumb",
    infinite: false,
    dots: true,
    slidesToShow: 1,
    arrows: false,
    slidesToScroll: 1,
    speed: 500,
    lazyLoad: 'progressive',
    initialSlide: 0 // 初始索引从0开始，对应第一张图
};

3. 轮播渲染的key值错误 #

product.images中的每一项是字符串URL，没有id属性，不能用item.id作为key，直接用URL本身（唯一）或索引即可。

修正后的渲染代码：

<Slider {...settings}>
    {product?.images?.map(item => (
        <div key={item}> {/* 用图片URL作为唯一key */}
            <img src={item} alt='产品图' />
        </div>
    ))}
</Slider>

内容的提问来源于stack exchange，提问作者mutebi godfrey