React useEffect（）状态未更新

Question

当我将useEffect挂钩与setState挂钩一起使用时，如果我只希望useEffect运行一次（即，将空数组作为第二个参数传递），则不会更新状态。

如果我将Im正在更新的数组作为第二个参数传递，则状态会更新，但useEffect会无限循环运行...

这是我试图运行的代码： 在此示例中，当打印出模因或endPage时-它们仍保留其初始状态值（[]和0）

function ImageContainer() {
  const [memes, setMemes] = useState([]);
  const [currentIndex, setIndex] = useState(0);
  const [currentPage, setPage] = useState(1);
  const [endPage, setEndPage] = useState(0);

  useEffect(() => {
    getMemes(currentPage).then((data) => {
      setEndPage(data.pagination.totalPages);
      setMemes(data.data);
      console.log(data);
      console.log(memes);
      console.log(endPage);
    });
  }, []);

但是如果我将模因作为第二个参数传递

function ImageContainer() {
  const [memes, setMemes] = useState([]);
  const [currentIndex, setIndex] = useState(0);
  const [currentPage, setPage] = useState(1);
  const [endPage, setEndPage] = useState(0);

  useEffect(() => {
    getMemes(currentPage).then((data) => {
      setEndPage(data.pagination.totalPages);
      setMemes(data.data);
      console.log(data);
      console.log(memes);
      console.log(endPage);
    });
  }, [memes]);

然后console.log显示两个状态都已更新，但是代码不断循环。

谢谢！

Answer 1

您的状态将被更新，但是这里的问题是您正在通过在console.log(memes)之后直接调用setMemes(data.data)来检查状态更新，但是组件的状态会异步更新 >表示setMemes是一个异步函数。

如果要在更新后memes进行某些操作（除了对其进行更新），请使用另一个useEffect钩子并将memes定义为其依赖项。

之所以发生无限循环，是因为您将memes定义为useEffect的依赖项，并且也在相同的效果内更新了memes。因此，useEffect不断地自我触发。

Answer 2

它堆积成无限循环，因为传递给函数的闭包随后设置了模因状态，从而触发了useEffect钩子，因为它正在侦听属性模因的状态。您可以在数组中传递currentPage。尝试使用加载状态。

Answer 3

您无需在效果依赖项中添加模因来创建无限循环，而是将其记录在组件函数中：

useEffect(() => {
  getMemes(currentPage).then((data) => {
    setEndPage(data.pagination.totalPages);
    setMemes(data.data);
    console.log('api data:',data);
  });
}, []);
console.log('memes:',memes);
console.log('end page:',endPage);