React多图选择器预览异常：每次选多张仅渲染一张

嘿，我一眼就看出问题出在哪了——这是React useState 更新的异步特性和闭包陷阱导致的小坑！

问题根源 #

你在forEach循环里反复调用setVenueImages([...venueImages, tempUrl])，但React的状态更新不是同步生效的。每次执行这个语句时，venueImages引用的都是当前渲染周期的旧状态（比如初始是空数组），所以循环5次后，每次都是基于空数组添加一个tempUrl，最终状态里只会剩下最后一次添加的那个URL，自然页面上只显示一张图。

两种修复方案 #

方案1：使用函数式更新（推荐）

useState的更新函数支持传入一个回调，这个回调会接收最新的状态值作为参数，这样就能确保每次更新都是基于当前最新的数组：

const handleImageChange = e => {
  if (e.target.files) {
    const filesArray = Array.from(e.target.files);
    filesArray.forEach(file => {
      const tempUrl = URL.createObjectURL(file);
      // 用函数式更新，基于最新状态添加新URL
      setVenueImages(prevImages => [...prevImages, tempUrl]);
    });
  }
};

方案2：先收集所有URL再一次性更新

如果不想多次触发状态更新，可以先把所有临时URL收集到一个数组里，再一次性合并到状态中，这样还能减少组件重渲染的次数：

const handleImageChange = e => {
  if (e.target.files) {
    const filesArray = Array.from(e.target.files);
    // 先收集所有临时URL
    const newImageUrls = filesArray.map(file => URL.createObjectURL(file));
    // 一次性合并到现有状态
    setVenueImages(prevImages => [...prevImages, ...newImageUrls]);
  }
};

额外注意：避免内存泄漏 #

临时URL（URL.createObjectURL生成的）会占用浏览器内存，记得在组件卸载时释放这些资源：

useEffect(() => {
  return () => {
    // 遍历所有临时URL，释放资源
    venueImages.forEach(url => URL.revokeObjectURL(url));
  };
}, [venueImages]);

这样修改后，不管你选多少张图，都能全部预览出来啦！

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