Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState……

问题分析

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.

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

正确的效果应该是点击按钮弹出Drawer,再允许用户进行操作。
然而这里跳过了第一步,直接去操作dispatch,所以出现一直render的局面。
经分析,错误代码位于按钮点击的函数调用。

 <Col span={4}>
    {verify === 'pass' ?
      null
      :
      <Button
      size='large'
      style={{ backgroundColor: '#1890ff', color: '#fafcfe' }}
      onClick={this.handleVerify()}
     >
    审核通过
     </Button>
     }
  </Col>

错误代码是 onClick={this.handleVerify()}这句代码的作用是,将函数运行的结果赋值onClick,继而执行dispatch,最后陷入修改数据渲染页面修改数据……的死循环中。
我们想要的结果是,点击按钮执行handleVerify函数,而不是直接将其运行结果赋值给onClick

问题总结

珍惜每次的实践机会,平时不是一味地敲代码,需要多多总结,反思,逐渐构造自己的一套知识体系。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值