React中使用for循环渲染轮播组件仅显示1个商品卡片的问题排查

问题根因 #

你写的for循环中直接使用了return语句，函数会在第一次循环迭代（i=0时）就直接返回第一个<ProductCard>组件，同时终止整个函数执行，后续的循环迭代不会被触发，因此只能渲染1个商品卡片。

修复方案 #

方案1：数组存储组件后返回 #

先声明空数组存储每次循环生成的组件，循环结束后统一返回数组即可：

const displayCarouselItems = () => {
    const items = [];
    for (let i = firstCarouselIndex; i < lastCarouselIndex; i++) {
        // 注意React列表渲染必须给子元素加唯一key属性，有商品唯一id优先用id
        items.push(<ProductCard key={i} product={products[i]} />);
    }
    return items;
};

方案2：用slice+map简化写法 #

不用手动写for循环，直接截取对应区间的商品数组再做映射渲染，代码更简洁易读：

const displayCarouselItems = () => {
    return products.slice(firstCarouselIndex, lastCarouselIndex).map(product => (
        <ProductCard key={product.id} product={product} />
    ))
};

内容的提问来源于stack exchange，提问作者Fransedo Ravelino