React组件setState异常：时钟秒数无法重置问题求助

你的秒数无法重置为0，核心问题有两个：

1. 逻辑分支冲突：第一个if里已经把秒数设为0，但后面的独立else分支又会执行secs+1，相当于刚重置就又加了1，所以秒数会从59直接跳到1，看不到0的状态。
2. 拼写错误：第二个判断里用了this.state.minutes，但你state里定义的是mins，这个错误会导致小时永远不会触发递增。

另外，直接用this.state.xxx+1的方式更新状态有风险，因为React的setState是异步的，连续调用可能会拿到旧的状态值，推荐用函数式更新来获取最新状态。

修复后的完整代码 #

class Time extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      hrs: 0,
      mins: 0,
      secs: 0
    };

    this.tick = this.tick.bind(this);
  }

  tick() {
    this.setState(prevState => {
      let { hrs, mins, secs } = prevState;
      
      // 先处理秒数
      secs += 1;
      if (secs >= 60) {
        secs = 0;
        mins += 1;
        
        // 处理分钟进位到小时
        if (mins >= 60) {
          mins = 0;
          hrs += 1;
        }
      }

      return { hrs, mins, secs };
    });
  }

  componentDidMount() {
    this.tock = setInterval(() => {
      this.tick();
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.tock);
  }

  render() {
    return (
      <div>
        <h1>Time</h1>
        <section>
          {this.state.hrs}:{this.state.mins}:{this.state.secs}
        </section>
      </div>
    );
  }
}

export default Time;

关键改动说明 #

• 改用函数式setState，通过prevState获取最新的状态值，避免异步更新导致的状态偏差。
• 调整时间进位逻辑：先给秒数加1，再判断是否需要进位到分钟，分钟满60再进位到小时，逻辑更连贯，不会出现分支冲突。
• 修正了minutes的拼写错误，改成mins，确保小时递增逻辑正常触发。

内容的提问来源于stack exchange，提问作者MN.