React-Native中报错【Maximum update depth exceeded】

React-Native项目中出现报错:
在这里插入图片描述
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
翻译过来的意思就是:当component在componentWillUpdate或componentDidUpdate时期内重复调用setState时,就会发生超过最大递归深度这个问题。
为了说明白这件事,我先搞一张React-Native的生命周期函数。
在这里插入图片描述
说一下错误出现的背景:我们依托react-final-form对表单的状态进行监控,并配合validation进行表单的输入验证。在表单的输入过程中如果出现不符合要求的输入将会return error,此时输入框下面的Button按钮将会变成灰色不可用状态,当输入正确时,Button的颜色将会是高亮显示为可用状态。
上代码截图:
在这里插入图片描述
Field内引入外部定义的component组件renderUpdateNameTextArea,此时在Button中的disabled的控制是由在state中定义的submitted决定的。我们通过改变submittedboolean值来改变Button的显示情况。
在这里插入图片描述
在外部定义组件renderUpdateNameTextArea中如果被validation监控时return error,那么hasError的值将会变成true,同时在这个分支区域内将state中的submitted的值改变为true,此时的button为灰色不可用状态。
在这里插入图片描述
当输入正确且符合要求时点击Button之后会调用setStatesubmitted进行改变。此时不会引发错误。
首先要明确一点:在React和React-Native中他们都是通过改变state的值来对UI进行改变。
分析一:
但是!当有输入错误存在时,renderUpdateNameTextArea中将会执行setStatesubmitted变为true,此时将会使button变灰色,即引发UI的重新变化,因此React-Native就要重新进行render,重新render就要在Field中重新的进行引入renderUpdateNameTextArea 组件。又因为此时输入的内容依旧是不符合验证条件的,他依然会走setState这一个分支。。。。。这样就会造成一个死循环,出现开头的那个错误。
分析二:
我们结合React-Native的生命周期函数对上述死循环再进一步分析:
用户输入完毕之后validation 发现错误并return error,在运行过程中他会将submitted变化为true,此时state发生改变,生命周期中shouldComponentUpdatetrue开始进行update,在componentWillUpdatecomponentDidUpdate中不断的执行Field的引入组件和renderUpdateNameTextArea 中的setState,生命周期中也会一直监控到state的变化,他就会在那一条线上一直执行。故造成死循环。
综上所述:
不能在render中直接使用外部的函数来进行state的改变。但是可以使用比如button的点击事件那样的方式来使用外部的函数对state进行进一步的改变。
在这里是逻辑上的错误,不应该使用这个方式来进行按钮的样式的变化。

参与评论 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

F-ZERO-F

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值