一、报错语句是什么意思？

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
错误：重新渲染过多。React限制渲染的数量以防止无限循环。

二、复现步骤，及其改法

1.错误代码

代码如下（示例）：

  const handlePreview = (url) => {setIsModalVisible(true)setPreviewUrl(url)}return (<div className="img-item" key={index}><imgstyle={{ width: "100%", height: "100%" }}src={item.url}alt={item.name}onClick={handlePreview(item.url)}/></div>);

2.修改方式

代码如下（示例）：

  const handlePreview = (url) => {setIsModalVisible(true)setPreviewUrl(url)}return (<div className="img-item" key={index}>method===1?// 方法（1）<imgstyle={{ width: "100%", height: "100%" }}src={item.url}alt={item.name}onClick={()=>handlePreview(item.url)}/>:// 方法（2）<imgstyle={{ width: "100%", height: "100%" }}src={item.url}alt={item.name}onClick={handlePreview.bind(this,item.url)}/></div>);

3.报错原因

在react中 handlePreview(item.url)会直接执行，不是点击触发

4.bind(this,data)

语法：
fun.bind(thisArg[, arg1[, arg2[, …]]])
thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。
arg1, arg2, … （可选）当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

bind后的this指向的是上下文，也就是这个组件，这个组件才有你所需要的方法,不懂没关系看代码↓

 this.all = '外部'var obj = {all:'内部',cb:function(){console.log(this.all)}}obj.cb();                         //  内部var out = obj.cb;out();                            //  外部var internal = out.bind(obj)internal();                       //  内部

总结

 可以采用箭头函数的方式，也可以采用bind()的方式解决此报错。有时间可以私下拓展一下bind()其他用法。

react报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.相关推荐

Too many re-renders. React limits the number of renderers to prevent an infinite loop...
原因:页面刷新进入了死循环,导致页面崩溃! 然后白屏了,,, 场景描述: 页面是一个 ip 区间,在区间后面显示一组数据是否都存在区间内的,都存在显示 √,部分存在显示 ×,并显示不存在区间内的 ...
React 报错 Error: useRoutes() may be used only in the context of a ＜Router＞ component
使用react-router-dom V6 发生报错,找了一会才解决,做个记录报错意思:大概就是要给路由提供一个上下文报错原因,一开始我是把 BrowserRouter 放到 App.js 文件中 ...
React报错 Too many re-renders
Too many re-renders. React limits the number of renderers to prevent an infinite loop 这种情况你要检查更新Stat ...
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 ...
启动react项目时失败，报错Error: Cannot find module
拷贝react项目到本地 npm run 运行项目时,报错Error: Cannot find module - 解决办法:一次性安装模块 sudo npm i 或者先安装yarn,利用yarn安装 ...
React报错：Too many re-renders
React报错:Too many re-renders. React limits the number of renders to prevent an infinite loop. Too man ...
npm start报错Error: error:0308010C:digital envelope routines::unsupported
(41条消息) npm run dev 报错:Error: error:0308010C:digital envelope routines::unsupported_爱的叹息的博客-CSDN博客 n ...
配置eslint+prettier报错Error: Cannot read config file: /Users/qiandingwei/Documents/projects/creams-main
安装eslint和prettier后出现如下报错 Error: Cannot read config file: /Users/qiandingwei/Documents/projects/cream ...
Flex报错Error #2048: 安全沙箱冲突
Flex+JPA架构,JPA程序迁移,从A服务器到B.其他一切没变,唯一变的就是IP. 前端Flex也就是swf报错Error #2048: 安全沙箱冲突:http://xxx.swf 不能从 xxx ...

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

文章目录

一、报错语句是什么意思？

二、复现步骤，及其改法

1.错误代码

2.修改方式

3.报错原因

4.bind(this,data)

总结

react报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.相关推荐

最新文章

热门文章