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

【问题标题】：useState dosen't work in react - useSelector, useState, useEffectuseState 在反应中不起作用 - useSelector、useState、useEffect
【发布时间】：2021-09-06 02:02:06
【问题描述】：

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

为什么我无法获取列表的值？（控制台中的 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)
  }

【问题讨论】：

没有getImages() 的上下文我假设images 开始是一个空数组？所以在第一次加载时setList 不会设置任何内容，当你使用 console.log 时，长度将为 0
@jackstride 非常感谢您的帮助！

标签： javascript reactjs redux use-effect use-state

【解决方案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]);

【讨论】：

非常感谢您的帮助！！效果很好！