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 更新时不更新。

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

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

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

useState dosen't work in react - useSelector, useState, useEffect

javascript

reactjs

redux

use-effect

use-state