Javascript React useffect（）状态为'；t更新

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

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

以下是我尝试运行的代码： 在本例中，当打印出Meme或endPage时，它们仍保留其初始状态值（[]和0）

但如果我将memes作为第二个参数传递：

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显示这两个状态都已更新，但代码一直无限循环

---

谢谢

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

您的状态将得到更新，但这里的问题是，您直接在

setMemes（data.data）

之后调用

console.log（memes）

来检查状态更新，但是组件的状态是异步更新的，这意味着

setMemes

是一个异步函数

如果您想在更新后对

memes

（更新除外）执行某些操作，请使用另一个

useffect

hook并将

memes

定义为其依赖项

---

无限循环之所以发生，是因为您将

memes

定义为

useffect

的依赖项，并在同一效果内更新

memes

。因此，这个

useffect

会不断地触发自身。

通过向效果依赖项添加模因，不必要地创建了一个无限循环，而是将其记录在组件函数中：

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);

---

我想您应该传递

currentPage

而不是数组中的memes，因为

getMemes

方法似乎依赖于

currentPage

。如果你通过

模因

，它将被卡在一个无限空间中loop@rishabh0211如果我通过当前页面，我会得到第一个场景（状态仍然没有得到更新），您的状态必须得到更新。状态更新是一项异步任务。但在这之后，您将把它记录到控制台。这就是为什么在控制台上看不到它的原因。我使用meme数组的唯一地方是当我尝试将它呈现为这样时：return（）；我假设状态没有得到更新的原因是，应用程序在试图从null中获取参数时崩溃object@MarkwinVI如果只使用

memes

进行渲染，则不需要另一个

useffect

。请发布错误消息。哪个对象是

null

以及您试图访问哪个参数？我从BE获得的对象数组如下

（2）[{…}，{…}]0:aws\u url:https://memesupply-memes.s3.amazonaws.com/1593899865516“createdAt:“2020-07-04T21:57:49.031Z”草稿：错误更新日期：“2020-07-04T21:57:49.031Z”\uu v:0\u id:“5f00fb5d3d7379325300c4fe”

然后在我的渲染中，我尝试像这样访问对象：

src={memes[currentIndex].aws_url}

但我收到以下错误消息：

无法读取未定义的

@MarkwinVI的属性“aws\u url”。这可能与您的问题有关，但与您发布的问题无关，因此此评论部分不适合进一步调查。请打开一个新问题。谢谢，但我自己解决了它。结果是在呈现异步数据之前，您必须等待一段时间：

{memes[0]？（）：（）}

这就成功了

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);