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

最新推荐文章于 2024-11-01 14:59:57 发布

原创

最新推荐文章于 2024-11-01 14:59:57 发布 · 8.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#React-Native #Maximum update depth exceeded #React Native超出最大递归深度

本文分析了在React-Native项目中遇到的`Maximum update depth exceeded`错误，该错误发生在组件更新时无限递归。文章通过生命周期函数解释了错误产生的原因：在表单验证过程中，错误状态导致组件不断重新渲染，形成死循环。解决方案是避免在`setState`回调中直接调用可能触发状态更新的外部函数，而应使用事件处理函数等间接方式更新状态。

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的颜色将会是高亮显示为可用状态。
上代码截图：
在这里插入图片描述
在