Too many re-renders. React limits the number of renderers to prevent an infinite loop...

原因：页面刷新进入了死循环，导致页面崩溃！然后白屏了，，，

场景描述：

页面是一个 ip 区间，在区间后面显示一组数据是否都存在区间内的，都存在显示 √，部分存在显示 ×，并显示不存在区间内的 ip

Console报错信息：Too many re-renders. React limits the number of renderers to prevent an infinite loop...

页面崩溃的代码：

const [ errorIps, setErrorIps]= useState<string[]>([]);//页面
<Row><ipInput> </Input>   //IP区间的控件{                    //状态显示seeError(items[index].value)?<span> √ </span>： <span> × <Popovertitle="错误 IP "content={<div>{ errorIps }</div>}><a>查看</a></Popover></span> }
</Row>//判断方法
const seeError=(value:string[]):string[]=>{let errors:string[]=[];props.List.map((item)=>{value.map((ele)=>{if(ele===item){errors.push();}setErrorIps(errors);});});
}

崩溃原因：每当页面渲染时，会触发seeError方法，方法中每次都会重置errors数组，errors数组状态每次更新会引起页面重新渲染，页面渲染又会触发seeError方法，，，，因此进入了无穷无尽的页面渲染，导致页面崩溃。。。

正确的代码：（不让页面渲染时更新状态）

const [errors, setErrors]= useState<string[]>([]);//页面
<Row><ipInput> </Input>   //IP区间的控件{                    //状态显示seeError(items[index].value).length===0?<span> √ </span>： <span> × <Popovertitle="错误 IP "content={<div>{ seeError(items[index].value).join(',')}</div>}><a>查看</a></Popover></span> }
</Row>//判断方法
const seeError=(value:string[]):string[]=>{let errors:string[]=[];props.List.map((item)=>{value.map((ele)=>{if(ele===item){errors.push();}//setErrors(errors);  //这个就不要了});});//取而代之，return这才是最重要的if( props.List.length === errors.length && errors=== 0){  //条件是业务的需要return [];  }else{return errors;}
}

注：也不是说所有的页面渲染不能 setState（），这个页面是触发了函数，函数里触发了setState，而这个state是个数组，只要触发一定会使页面重新渲染。

有些布尔型或者number、string，基本类型是可以在页面更改的，react本身会判断一下是否相等，不等才更新，才会渲染。

另外，白屏由各种各样的原因导致，比如，内存泄漏、代码死循环，页面崩溃等，那么遇到了白屏我们不要怕，我们一步步来解决，首先先排查哪一块导致了白屏，白屏时Console里有没有报错信息，Network里的接口调用的情况，Performance里的内存变化等，定位到了原因就好解决了。

Too many re-renders. React limits the number of renderers to prevent an infinite loop...相关推荐

react报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
文章目录一.报错语句是什么意思? 二.复现步骤,及其改法 1.错误代码 2.修改方式 3.报错原因 4.bind(this,data) 总结一.报错语句是什么意思? Error: Too many ...
React报错：Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
前言在今晚用React的Hook写页面的时候,在写一个tab栏,然后要点击切换不同的tab,然后出现了一个报错: Error: Too many re-renders. React limits t ...
解决“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”
解决"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 infinite错误的解决方案
今天在开发RN程序的时候,报了一个Too many re-renders. React limits the number of renders to prevent an infinite.刚开始怀 ...
react错误：Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infini
react错误: Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infin ...
Too many re-renders. React limits the number of renders to prevent an infinite loop
在函数组件使用useState更新state数据时页面出现如下报错: 意思是:太多的被重新呈现.React限制呈现的数量,以防止无限循环. 原因是代码<a onClick={ setVisibl ...
关于Too many re-renders. React limits the number of renders to prevent an infinite loop.的解决方案
在开发平常的react项目的时候,我们可能会对一个数据进行数据判断,然后在进行setstate更新其他的状态.比如 const mouse = useMouse()const [height, set ...
React 报错 Too many re-renders. React limits the number of renders to prevent an infini
写hooks遇到的,大概率是this的问题, 标签里写成箭头函数 <button onClick={() => setCounter(counter + 1)}>+1</but ...
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
因为打算实现切换效果时对button的click事件 this指代有问题可以使用箭头函数或者bind(this) 来解决 <button onClick={()=>toggle()}& ...

Too many re-renders. React limits the number of renderers to prevent an infinite loop...

Too many re-renders. React limits the number of renderers to prevent an infinite loop...相关推荐

最新文章

热门文章