从API获取图片数组渲染轮播图，页面加载时不显示的问题

核心原因 #

初始设置useState(putih)时，putih函数会立即执行，此时API请求尚未完成，result还是初始空值，result[0]为undefined，导致轮播图没有可渲染的内容。而点击切换时，result已经拿到API数据，函数执行能正常渲染图片。

解决方案 #

1. 重构state存储逻辑 #

不要将组件函数存在state中，改为存储选中项的索引（或标识），通过索引动态渲染对应轮播图：

// 替换原有的selected state
const [selectedIndex, setSelectedIndex] = useState(0);

2. 统一轮播渲染逻辑，移除冗余代码 #

编写通用的渲染函数，避免重复定义多个类似的组件函数：

// 切换选中项时同时更新购物车数据
const handleSelect = (index) => {
  setSelectedIndex(index);
  setToCart(result[index]);
};

// 渲染当前选中的轮播图
const renderCarousel = () => {
  const currentItem = result[selectedIndex];
  // 无数据时返回加载提示或null
  if (!currentItem?.image) return <div>加载中...</div>;
  
  return (
    <Carousel interval={null}>
      {currentItem.image.map((imageUrl, i) => (
        <Carousel.Item key={i}>
          <LazyLoadImage
            effect="blur"
            className="d-block w-100"
            src={`https://ecgobikeid.com/${imageUrl}`}
            alt={`轮播图 ${i + 1}`}
          />
        </Carousel.Item>
      ))}
    </Carousel>
  );
};

3. 主组件中使用重构后的逻辑 #

// 切换按钮
<div className="carousel-controls">
  <button onClick={() => handleSelect(0)}>Putih</button>
  <button onClick={() => handleSelect(1)}>Hitam</button>
  <button onClick={() => handleSelect(2)}>Merah</button>
</div>

// 渲染轮播图
{renderCarousel()}

额外优化：处理初始加载状态 #

在result未获取到数据时，显示加载提示：

if (!result || result.length === 0) {
  return <div>数据加载中...</div>;
}

效果说明 #

API数据加载完成后，result更新触发组件重渲染，renderCarousel会根据selectedIndex获取对应数据并渲染轮播图，初始加载即可显示内容；切换按钮通过handleSelect更新选中索引，同时更新购物车数据，避免了原代码中重复渲染逻辑和不必要的state更新。

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