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

冷不防 2022-04-02 09:40 1264阅读 0赞

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

[20181226104900673.png]: /images/20220402/031dc63ee9a24d76af54cecd0904b496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220402/fd7bc823f3924e79aee1fed72aaa9e81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220402/603c45d21d254f488308aae5cce9bd12.png
[20181226111146855.png]: /images/20220402/2ffe413c1c814cb889bb17d669928152.png
[20181226112319471.png]: /images/20220402/cca39d77cedb4c94906b39ea9ad72203.png