[react] 严格模式下setState两次调用及解决方法

背景

在做列表删除的时候, 发现一次性删除了2个项, 觉得奇怪. 后来经过讨论, 发现是使用了严格模式导致setState被执行了两次.

删除前:

删除后:

index.js代码

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

删除组件代码

// js逻辑
fnDel = (i) => {
  console.log('123')
  this.setState(state => {
    let temp = state.aTodolist
    temp.splice(i, 1)
    console.log(i, temp)
    return {
      aTodolist: temp
    }
  })
}

// Jsx代码
{
	aTodolist.map((item, i) => {
  	return <li key={i}><span>{item}</span><a href="javascript:;" className="del" 
           onClick={() => this.fnDel(i)}>删除</a></li>
  })
}

点击删除, 打印台会出现一次’123’, 但是会出现两次temp的值, 如下:

Why ???

原因是使用了严格模式. 官网的解释:

如何解决这个问题?

方法1: 去掉严格模式

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

方法2: 使用深拷贝[1]

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

参考:

1. React]setState自动触发两次