为什么这个setState函数工作异常

Question

我在 state 中添加了一个计时器变量，每秒改变 1 为什么它是每秒渲染 2,4,6,.. 而不是 1,2,3,.. 以及如何改进它？

import React, { Component } from 'react'

export class UseRefTimer extends Component {

interval

constructor(props) {
    super(props)

    this.state = {
         timer:0
    }
}

componentDidMount(){
     this.interval = setInterval(()=>{
         this.setState( prev => (this.state.timer = prev.timer + 1))
     },1000)
}


componentWillUnmount(){
    clearInterval(this.interval)
}

render() {
    return (
        <div>
            Time : {this.state.timer} 
        </div>
    )
}

}

导出默认的 UseRefTimer

Answer 1

你正在变异this.state.timer。您应该只返回下一个状态：

this.setState( prev => ({timer: prev.timer + 1}));

您看到状态增加2 的原因是strict mode。在严格模式下，setState 被调用两次以检测意外的副作用。更新函数应该是纯的（无副作用）：

严格模式无法自动为您检测副作用，但它 可以通过使它们更具确定性来帮助您发现它们。 这是通过有意双重调用以下函数来完成的：

• 类组件constructor、render和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 函数组件体
• 状态更新函数（第一个参数 setState)
• 函数传递给useState、useMemo 或useReducer