Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component……

最新推荐文章于 2024-12-26 14:28:35 发布

原创最新推荐文章于 2024-12-26 14:28:35 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #react.js

收录于

JavaScript知识点同时被 2 个专栏收录

6 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文探讨了在React中如何避免因不当使用setState导致的无限循环更新问题。具体介绍了错误用法及其背后的原理，并提供了使用箭头函数和条件判断来解决问题的方法。

react中使用setState报错：
Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

在这里插入图片描述
报错原因是在render函数中使用setState造成state改变，state改变就会重新渲染render，每次render又会setState，就会造成页面死循环。
解决方法：

使用箭头函数

() => {
函数体
setState()
}

在有条件的代码块中使用setState

const { code, data, message } = await fetchFn(_params);
    if (code === SUCCESS) {
      setNameList(_params.products);
      ...
      ...
    } else {
      console.error(message);
      ...
      ...
  }