开发者社区开发与运维文章正文

React setState执行两次的问题

2023-05-30 398

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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
    }
  })