React组件传递数据时丢失images数组问题求助

1. 异步状态更新的引用问题 #

getGalleries里如果直接修改原gallery对象的images属性（比如gal.images = await fetchImages()），React的状态更新机制依赖引用变化，这种原地修改对象的操作无法被检测到，导致GalleryGridItem拿到的还是旧的状态引用，显示空数组。

解决：返回新的对象数组，避免修改原数据：

// 错误写法
galleries.forEach(async gal => {
  if (gal.interactive) {
    gal.images = await fetch(gal.imageUrl).then(res => res.json());
  }
});

// 正确写法
const updatedGalleries = await Promise.all(
  galleries.map(async gal => {
    if (!gal.interactive) return gal;
    const images = await fetch(gal.imageUrl).then(res => res.json());
    return { ...gal, images }; // 返回全新对象，触发状态更新
  })
);

2. 渲染时机不匹配 #

如果useFetchGalleries在图片请求未全部完成时就更新了状态，GalleryGrid可能会先渲染出包含部分未完成数据的列表，而GalleryGridItem渲染时，对应gallery的images还没加载完成，显示为空。

解决：确保所有图片请求完成后再更新状态。用Promise.all等待所有interactive gallery的图片请求结束，再返回完整数据更新hook状态。

3. 浅比较导致的组件未重渲染 #

如果用React.memo包裹了GalleryGridItem，默认的浅比较会认为gallery对象引用没变化（只是内部images属性更新），从而跳过重渲染，导致组件一直显示旧的空数组。

解决：

• 要么始终返回新的gallery对象（如第一点的写法）；
• 要么自定义React.memo的比较函数，检查images的变化：

const GalleryGridItem = React.memo(({ gallery }) => {
  // 组件内容
}, (prevProps, nextProps) => {
  // 当images长度变化时触发重渲染
  return prevProps.gallery.images.length === nextProps.gallery.images.length;
});

4. 图片请求失败未处理 #

可能某个interactive gallery的图片请求失败，导致images数组为空，而GalleryGrid里看到的是其他正常加载的gallery数据，刚好传给GalleryGridItem的是请求失败的那个。

解决：添加错误捕获，给失败的请求设置默认值：

const images = await fetch(gal.imageUrl)
  .then(res => {
    if (!res.ok) throw new Error('图片请求失败');
    return res.json();
  })
  .catch(err => {
    console.error(err);
    return []; // 或返回默认图片数组
  });

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