React项目报错× Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a compon

开发过程中的代码是这样的

render() {
    //只有路由组件才可以获取path,这时就需要withRouter
    const path = this.props.location.pathname
    const {navList} =this.props
    return(
     <TabBar className="footer-bottom">
         {
             navList.map((nav)=><Item
                key = {nav.path}
                title={nav.text}
                icon={{uri:require("./images/"+nav.icon+".png")}}
                selectedIcon={{uri:require("./images/"+nav.icon+"-selected.png")}}
                selected={path===nav.path}
                
                //下面就是产生错误的地方
                onPress={this.props.history.replace(nav.path)}
             />)
         }
     </TabBar>

浏览器报错如下:
在这里插入图片描述
大体意思就是在重复setstate,原因就是React在初次渲染页面的时候会执行(this.props.history.replace(nav.path))这个方法,而这个方法的执行又会导致页面的重新渲染,这样反复执行堆栈就崩溃了。 所以运行项目的时候不需要立刻执行代码,只有点击之后才需要,这就涉及到函数加括号和不加的区别
传送门 js绑定函数需不需要加括号的问题

解决方法有两种

1.用ES6箭头函数

onPress={()=>this.props.history.replace(nav.path)}

2.再写一个方法,然后传入方法名(这里只是提供一种写法,但是参数需要修改一下,因为不一样)

MyOnPress=()=>{
	this.props.history.replace(this.props.nav.path)
}
onPress={this.MyOnPress}

文章若有错误,欢迎大佬批评指正,也欢迎大佬来讨论。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程小飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值