useState 在反应中不起作用 - useSelector, useState, useEffect

Question

要加载更多图像，列表应该接受图像的值，但它不起作用。

为什么我无法获取列表的值？ （控制台中的 list.length=0）

  const { images, imagesLoaded } = useSelector((state: RootState) => state.gallery);
  const dispatch = useDispatch();
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    if(!imagesLoaded) {
      dispatch(getImages());
    }
    // eslint-disable-next-line
  }, []);
  
  const [list, setList] = useState([...images.slice(0, 5)])

  console.log(images.slice(0, 5))
  console.log(list.length)

  const [loadMore, setLoadMore] = useState(false)
  const [hasMore, setHasMore] = useState(images.length > 5)
  const handleLoadMore = () => {
    setLoadMore(true)
  }

Answer 1

因为 images 只有在调用 dispatch(getImages()); 后才有价值

const [list, setList] = useState([...images.slice(0, 5)]) 将声明 list 的初始值，并且不会在 images 更新时更新。

如果你想在list更新时更新images，你可以使用useEffect：

  useEffect(() => {
    setList(images.slice(0, 5))
    // eslint-disable-next-line
  }, [images]);