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
    }
  })

最后贴一下官方的解释：