React更新useEffect中的状态导致数据不完整

Question

我需要一个 React 组件来显示由“n”个弹性布局组成的自定义布局中的一些图片。每个 Flex 都有一组图片包裹在另一个 Flex 中，带有

flex-direction: column

。目标是实现类似于 CSS

columns

的布局，但对其进行更多控制。 这是我的代码：

import React, { useEffect, useState } from "react"
import { useParams } from "react-router-dom"
import useStorage from "../hooks/useStorage"
import { Column } from "./Column"

const splitInColumns = (nCols, photos) => {
  if (Array.isArray(photos)) {
    const cols = new Array(nCols).fill(null).map(() => [])
    let count = 0

    for (let i = 0; i < photos.length; i++) {
      cols[count].push(photos.pop())
      count == nCols - 1 ? (count = 0) : count++
    }

    return cols
  }
}

function Album() {
  const params = useParams()
  const [isLoading, folder] = useStorage({ type: "get-album", path: `assets/albums/${params.albumID}` })
  const [album, setAlbum] = useState([])

  useEffect(() => {
    if (Array.isArray(folder)) {
      setAlbum(splitInColumns(3, folder))
    }
  }, [folder, isLoading])

  {
    isLoading && <p>Caricamento</p>
  }

  return (
    <div>
      <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>
  )
}

export default Album

问题：我收到的照片比实际应该的少。 我想问题是我更新

album

钩子内的

useEffect()

状态的方式。但是，每次

album

发生变化时，

folder

状态不应该更新吗？为什么我收到的图像较少？

Answer 1

问题很简单，我正在使用

pop()

方法来获取文件夹的最后一个项目，在我的

splitInColumns

内，所以我得到了一半的项目，因为

useEffect

每次执行此操作时都会重新运行（我猜）。