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

最新推荐文章于 2025-06-22 20:38:19 发布

原创

最新推荐文章于 2025-06-22 20:38:19 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native #setState（）不立即生效

本文详细描述了在React Native项目中遇到的setState在循环中不生效的问题，分析了原因，并提供了两种解决方法：使用全局变量和利用setState的回调函数。文章强调了理解setState的异步性质和正确使用场景的重要性。

一：问题描述

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。