React setState执行两次的问题

简介: React setState执行两次的问题解决修复。

您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~

在做组件库的过程中,测试项目引入线上组件发现状态的修改执行了两次,而组件项目中只执行一次(正常),分析原因后发现组件项目未开启严格模式,而测试项目开启了严格模式,代码如下:

ReactDOM.render(
  <React.StrictMode>
    <App />,
  </React.StrictMode>,
  document.getElementById('root')
)

解决方案有两种:
1.关闭严格模式

ReactDOM.render(
    <App />,
  document.getElementById('root')
)

2.深拷贝需要修改的状态变量

this.setState(state => {
   
   
    // 严格模式下, 深拷贝可解决setState被执行两次
    let temp = JSON.parse(JSON.stringify(state.aTodolist))
    temp.splice(i, 1)
    console.log(i, temp)
    return {
   
   
      aTodolist: temp
    }
  })

最后贴一下官方的解释:
在这里插入图片描述

目录
相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
63 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
5月前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
前端开发 JavaScript
React 中 setState 什么时候是同步的,什么时候是异步的
React 中 setState 什么时候是同步的,什么时候是异步的
115 0
|
前端开发 JavaScript
react的setState是异步还是同步
react的setState是异步还是同步
|
6月前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
44 0
|
6月前
|
前端开发 算法
React中的setState执行机制?
React中的setState执行机制?
|
6月前
|
前端开发
React中setState方法详细讲解
React中setState方法详细讲解
|
6月前
|
前端开发 JavaScript 算法
react中的setState的执行机制
react中的setState的执行机制
42 0
|
6月前
|
前端开发
【React学习】—SetState的使用(九)
【React学习】—SetState的使用(九)
|
前端开发 JavaScript 数据管理
react数据管理之setState与Props
react数据管理之setState与Props
68 0