React中useEffect更新state导致图片数据缺失问题排查

核心原因 #

你遇到的图片缺失问题，根源出在splitInColumns函数里的photos.pop()调用：

• 数组是引用类型，photos直接指向了useStorage返回的folder原数组
• pop()会直接从原数组中移除末尾元素，第一次调用splitInColumns后，folder数组的元素已经被修改/清空
• 后续useEffect因为isLoading变化再次触发时，folder已经没有足够的元素可以分配，最终导致展示的图片数量不足

另外还有一个小问题：你单独写的{isLoading && <p>Caricamento</p>}不在组件的JSX返回结构中，不会被渲染出来，需要放到return的内容里。

修复方案 #

方案1：不修改原数组，保持原分配逻辑（反转图片顺序） #

创建原数组的副本再进行操作，避免污染原状态：

const splitInColumns = (nCols, photos) => {
  if (!Array.isArray(photos)) return [];
  // 复制原数组，避免修改useStorage返回的原数据
  const photosCopy = [...photos];
  const cols = new Array(nCols).fill(null).map(() => []);
  let count = 0;

  while (photosCopy.length > 0) {
    cols[count].push(photosCopy.pop());
    count = (count + 1) % nCols;
  }

  return cols;
}

方案2：保持图片原顺序分配 #

如果不需要反转图片顺序，改用索引取余的方式分配元素，同样不修改原数组：

const splitInColumns = (nCols, photos) => {
  if (!Array.isArray(photos)) return [];
  const cols = new Array(nCols).fill(null).map(() => []);
  
  photos.forEach((photo, index) => {
    // 根据元素索引分配到对应列，保持原顺序
    const colIndex = index % nCols;
    cols[colIndex].push(photo);
  });

  return cols;
}

修复加载提示渲染问题 #

把加载提示放到组件返回的JSX结构内：

function Album() {
  // ...其他代码不变

  return (
    <div>
      {/* 把加载提示放到return的结构里 */}
      {isLoading && <p>Caricamento</p>}
      <div className="flex justify-center">
        <div className="flex w-5/6 h-full">
          {album.map((col, index) => (
            <Column
              key={index}
              items={col}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

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