React报错：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

最新推荐文章于 2024-09-02 09:02:39 发布
最新推荐文章于 2024-09-02 09:02:39 发布
阅读量2w 收藏 6
点赞数 6
分类专栏： Taro React 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43529196/article/details/109913260
版权
本文介绍了在使用React Hook开发页面时遇到的一个常见问题：由于无限循环导致的‘Error: Too many re-renders’错误。在尝试实现一个点击切换Tab功能时，错误发生。解决方案是在事件处理函数中正确地绑定`this`。
摘要由CSDN通过智能技术生成

前言

在今晚用React的Hook写页面的时候，在写一个tab栏，然后要点击切换不同的tab，然后出现了一个报错：
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

在这里插入图片描述
页面代码 apply_list.jsx

function ApplyList(props) {
   
  const [currTab, setCurrTab] = useState(0)
  const {
    preApplyList } = props

  // 切换tab
  function switchTab(tab) {
   
    setCurrTab
最低0.47元/天 解锁文章
ozoZai
关注
专栏目录
关于React报Too many re-renders. React limits the number of renders to prevent an infinite错误的解决方案
xiangzhihong8的专栏
08-26 7685
今天在开发RN程序的时候，报了一个Too many re-renders. React limits the number of renders to prevent an infinite。刚开始怀疑是页面渲染的内容太多，后来将其他元素都删除，结果还是报这个错误。于是就想到了重复渲染的问题，比如下面的写法就会造成重复渲染： onClick={setTime(false)} 需要改成下面的方式： onClick={() => { setTime(false); }} 因为上面的代码会造成代
react报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
congCong的博客
04-22 1万+
文章目录一、报错语句是什么意思？二、复现步骤，及其改法1.错误代码2.修改方式3.报错原因4.bind(this,data)总结 一、报错语句是什么意思？ Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. 错误：重新渲染过多。React限制渲染的数量以防止无限循环。 二、复现步骤，及其改法 1.错误代码 代码如下（示例）： const handlePreview =
react报错：Too many re-renders. React limits the number of renders to prevent an infinite loop. 解决方法
weixin_43354152的博客
06-16 659
如果useState函数使用不当，导致Too many re-renders的错误原因分析以及解决方法。
解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”
热门推荐
fish_skyyyy的博客
07-27 1万+
解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.” 问题： import {useState, Fragment} from 'react'; import Add from './dialogAdd'; function Top() { const [visible, setVisible] = useState(false); const isVisible
Too many re-renders. React limits the number of renders to prevent an infinite loop
sunnyjingqi的博客
03-17 1002
一：报错原因及如何修复 在函数组件使用useState更新state数据时页面出现如下报错： 意思是：太多的被重新呈现。React限制呈现的数量，以防止无限循环。 原因是代码<a onClick={ setVisible(false)}中，花括号{}方法体会被直接触发，在react呈现中调用setVisible函数，setVisible函数触发后，数据更新导致页面重新渲染，会继续触发onClick事件，回调中触发了重新呈现，最常见的是setState触发，这将再次调用事件回调，并导致Reac
Too many re-renders. React limits the number of renders to prevent an infinite loop. at renderWi
最新发布
m0_46165310的博客
09-02 368
这种情况往往是因为在组件的渲染逻辑（render method 或函数组件的返回部分）中直接修改了状态（state）或调用了导致状态更新的函数，从而触发了新的渲染，进而再次修改状态，形成了一个循环。确保所有的状态更新都发生在合适的位置（如事件处理器、副作用中），并且避免在渲染方法中直接修改状态或调用会导致状态更新的函数。如果你不小心在组件的渲染逻辑中递归调用了自己（例如，在组件的JSX中直接引用了自己），也会导致无限渲染。在useEffect中提供依赖项数组，以确保只有在依赖项变化时才执行更新。
React报错之Too many re-renders
Web_boom的博客
01-11 4124
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
React Hooks 源码学习
发果叁
08-12 424
React Hooks 添加于 React 16.8，用于 React 中函数组件的一类特殊函数，它们允许你在不编写类组件而是使用简单的函数组件（Function Component，以下称FC）的情况下依然享受到状态、上下文、副作用等 React 特性。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。// 下面自定义了一个获取窗口长宽值的hooks}...
React源码分析（二）=> Reac初次渲染分析
翾的博客
07-02 5384
Reac初次渲染分析 源码基于React 16.8.6, 内容极长, 必须配合源码一起来看 单步调试的例子: `ReactDOM.render('hello', document.getElementById('root'))`; 下文基于这个例子来一步一步分析.
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
weixin_43286206的博客
08-02 350
因为打算实现切换效果时对button的click事件 this指代有问题 可以使用箭头函数 或者bind（this） 来解决 <button onClick={()=>toggle()}>{state.label}</button>
Too many re-renders. React limits the number of renderers to prevent an infinite loop...
Realizee的博客
10-22 3838
原由：页面是一个 ip 区间，在区间后面显示 一组数据是否都存在区间内的，都存在显示√，部分存在显示 ×，并显示不存在区间内的 ip 页面崩溃的代码： //页面 <Row> <ipInput> </Input> { seeError(value)? <span> √ </span> ： <span> × <Popover ..
React报错：Too many re-renders
没化妆，别看
10-31 1409
翻译一下：太多重复渲染，React限制渲染次数防止无限循环。
关于Too many re-renders. React limits the number of renders to prevent an infinite loop.的解决方案
m0_70718568的博客
11-26 5268
解决Too many re-renders. React limits the number of renders to prevent an infinite loop
react错误：Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infini
shengmeshi的博客
02-09 1164
react页面不断刷新：Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
React 报错 Too many re-renders. React limits the number of renders to prevent an infini
sexnmaa的博客
05-13 2140
写hooks遇到的，大概率是this的问题， 标签里写成箭头函数 <button onClick={() => setCounter(counter + 1)}>+1</button> 或者用bind绑定this onClick={increment.bind(this)} 建议用第一种 如果解决了给个赞吧！ ...
[React] Prevent Unnecessary Rerenders of Compound Components using React Context
weixin_33910137的博客
08-29 96
Due to the way that React Context Providers work, our current implementation re-renders all our compound component consumers with every render of the &lt;Toggle /&gt; which could lead to unnecessary r...
react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of rende
wbskb的博客
07-22 322
在组件中直接或间接地修改了组件的状态（state）：当组件状态发生变化时，React会重新渲染组件。解决方法是确保状态的更新仅在必要时进行，并避免在渲染过程中修改状态。或类组件的生命周期方法时，需要指定依赖项数组，以确保只有在依赖项发生变化时才执行相应的代码。使用递归组件时没有正确设置停止条件：如果使用递归组件，必须确保设置了停止条件，否则会导致无限递归渲染。请检查递归组件的实现，并添加合适的停止条件。在条件判断中忘记添加退出条件：如果在条件判断中没有提供合适的退出条件，可能会导致组件无限循环重新渲染。
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.
03-16
最大更新深度已超过。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值