React中Map函数渲染轮播图数量不符问题求助

问题描述 #

使用DaisyUI/TailwindCSS开发轮播组件，图片资源取自Firebase Storage。存储内有2张图片，打印数组长度显示正常，但通过map渲染imageUrls状态数组时，仅能显示1张图片而非全部。

用户原代码 #

const MyCarousel = () => {
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const storage = useStorage();

  const getImages = async () => {
    const storageRef = ref(storage, 'Tech/');
    const files = await listAll(storageRef);

    const imageAppender: string[] = Array(files.items.length);
    console.log('img', imageAppender.length);
    files.items.forEach(async (item, key) => {
      const imageRef = ref(storage, item.fullPath);
      getDownloadURL(imageRef).then((url) => {
        imageAppender[key] = url;
        setImageUrls(imageAppender);
      });
    });
  };

  useEffect(() => {
    getImages();
  }, []);

  return (
    <>
      <div className="carousel w-full">
        {imageUrls.map((image, key) => {
          return (
            <div key={key} id={'item' + key} className="carousel-item w-full">
              <img src={image} className="w-full" />
            </div>
          );
        })}
      </div>
      <div className="flex justify-center w-full py-2 gap-2">
        {imageUrls.map((_, key) => {
          return (
            <a key={key} href={'#item' + key} className="bth btn-ghost btn-circle text-center">
              {key}
            </a>
          );
        })}
      </div>
    </>
  );
};

export default MyCarousel;

问题根源 #

1. 异步操作的执行顺序与状态更新时机问题：forEach不支持异步/await语法，你在forEach的回调中使用async，导致getDownloadURL的异步任务执行顺序不可控。每次获取到一个图片URL就立刻调用setImageUrls，当第一个URL完成更新后组件会提前渲染，此时第二个URL还未获取到，imageUrls数组中对应位置为undefined，React渲染时会忽略无效的图片地址，因此看起来只有1张图。
2. 状态更新的引用复用问题：你复用了同一个imageAppender数组引用多次触发状态更新，由于异步操作的特性，后续的状态更新可能会覆盖之前的不完整状态，导致最终渲染时数组内容异常。

修复方案 #

改用Promise.all等待所有图片URL获取完成后，一次性更新状态，避免多次部分更新导致的渲染异常；同时替换forEach为map来生成异步任务数组，保证所有异步操作并行执行且统一等待结果。

修正后的代码 #

const MyCarousel = () => {
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const storage = useStorage();

  const getImages = async () => {
    const storageRef = ref(storage, 'Tech/');
    const files = await listAll(storageRef);

    // 生成所有获取图片URL的Promise数组
    const urlPromises = files.items.map(item => {
      const imageRef = ref(storage, item.fullPath);
      return getDownloadURL(imageRef);
    });

    // 等待所有URL获取完成后，一次性更新状态
    const fetchedUrls = await Promise.all(urlPromises);
    setImageUrls(fetchedUrls);
  };

  useEffect(() => {
    getImages();
  }, []);

  return (
    <>
      <div className="carousel w-full">
        {imageUrls.map((image, key) => {
          return (
            <div key={key} id={`item${key}`} className="carousel-item w-full">
              <img src={image} className="w-full" alt={`轮播图-${key}`} />
            </div>
          );
        })}
      </div>
      <div className="flex justify-center w-full py-2 gap-2">
        {imageUrls.map((_, key) => {
          return (
            <a key={key} href={`#item${key}`} className="btn btn-ghost btn-circle text-center">
              {key + 1}
            </a>
          );
        })}
      </div>
    </>
  );
};

export default MyCarousel;

额外修复点 #

• 修正了原代码中className="bth"的笔误，改为正确的btn
• 为图片添加了alt属性，提升可访问性
• 使用模板字符串替代字符串拼接，让代码更简洁易读

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