解决React Native项目中setState在循环中不生效

蔚落 2022-03-16 04:14 503阅读 0赞

## 一： 问题描述 ##

constructor (props) {
        super(props)
        this.state = {
          dynamicNum: 0
        }
      }
    componentWillMount () {
        const data = this.props.data
        data.allPersonPosts.nodes.map((p, i) => {
          if (p.deleted === false) {
            this.setState({
              dynamicNum: this.state.dynamicNum + 1
            })
          }
        })
      }

**描述：**  
`React Native`生命周期`componentWillMount`是组件还未`render`时执行的，因此写在这个生命周期内部的逻辑表示将父组件传过来的`data`接收过来并进行遍历和判断，随后进行设置`state`中的值。  
在我的数据中数组 `data.allPersonPosts.nodes`的长度是3。而且内部每一个元素对象的`deleted`值都是`false`，所以按理说在遍历完之后，`dynamicNum`的值应该为3。但是在整个过程结束之后，`dynamicNum`的值都还是1。

## 2:原因分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
再附上一张偷来的`react-native`生命周期流程图。  
在这之前我们先来说一下`react/react-native`中的`state`的作用：  
能从官网截图我就不自己写，来自于官网的截图更具有权威 -\_-  
https://reactjs.org/docs/react-component.html\#setstate  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 1]  
`setState（）`这个方法是用来更新组件的。他告诉`react`需要使用最新的状态来重新呈现组件及其子组件。而且`React`通常并不是立即更新的。因此这对使用者造成很大的误解陷阱。相反，如果使用生命周期`componentDidUpdate`或者是`setState`回调，他就可以立即进行更新。  
下面是在`React Native`中文官网中看到的对于初学者的忠告：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 2]  
一切界面的变化都是状态`state`的变化，我们在使用`state`时需要明白：  
**到底需不需要引发状态的改变，继而引发页面重新渲染。来确定`state`的使用场景**  
每一次`setState`都是一个异步操作，他不会马上生效，都会在`render`之后才会生效。因此我们在生命周期`componentWillMount`中去进行循环，当第一个条件满足时进行

this.setState({
              dynamicNum: this.state.dynamicNum + 1
            })

可是如果想要在遍历第二次时生效就必须在`render`之后上次改变的`state`才会真正的变化。而我们在生命周期`componentWillMount`中进行操作，这个生命周期恰好又在`render`之前，所以此时的`state`将不会生效，最后`dynamicNum`的结果将会一直是1。

## 三：解决方式 ##

在前面有一句话：**我们在使用`state`时要考虑到是不是在以后的逻辑中会用到这个值去进行组件状态的改变，继而引发页面的重新渲染。**  
在前面的问题中，我并不需要他在每次循环时`setState（）`都去改变页面的状态进行重新渲染。我只需要在初始时使用他记录一下符合条件的值，因此我大可不必在每次循环时都更新`state`。  
**方法1:使用全局变量**

//在组件外定义全局变量
    let dynamicNumTest = 0

componentWillMount () {
        const data = this.props.data
        data.allPersonPosts.nodes.map((p, i) => {
          if (p.deleted === false) {
            dynamicNumTest = dynamicNumTest + 1
          }
        })
        this.setState({
          dynamicNum: dynamicNumTest
        })
      }

如此，在循环时改变全局变量，在循环结束后将全局变量的值赋值给`dynamicNum`，这样在`render`之后，`state`的值就可以生效。  
**方法2：使用setState回调**  
![在这里插入图片描述][20190226145304271.png]  
使用`setState`的回调可以将`state`改变的值立即生效进行使用，在这里我的并不适用于这个场景，但是有一个csdn博客给了我很大的启发。附上链接：  
https://blog.csdn.net/halo1416/article/details/82840465

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220316/a02d544b37034310997164a07dd17907.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220316/1be86c381c5f46f6aeed28ac1cfb0e22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 2]: /images/20220316/3f5f0e5d794c447ab2f5f5b9151c2486.png
[20190226145304271.png]: /images/20220316/4bf53c6dbc4e42fbb063d156035badd2.png