问题分析
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
问题总结
珍惜每次的实践机会,平时不是一味地敲代码,需要多多总结,反思,逐渐构造自己的一套知识体系。