React类组件开发中无法正常停止倒计时计时器问题求助

核心问题原因 #

• 判定逻辑仅执行一次：componentDidMount是组件挂载阶段仅触发一次的生命周期，你写的停止条件判断只会在组件刚加载时运行一次，只要此时满足启动条件就会持续运行定时器，后续count降到0、isStopped变为true都不会主动终止定时器。
• 缺少状态变更监听处理：用户点击切换停止状态、count数值更新到0时，都没有手动清理运行中的setInterval，导致定时器持续执行造成count变为负数。
• setState取值隐患：定时器中直接读取this.state.count赋值，由于setState是异步更新，高频率触发时可能出现状态取值滞后的问题。
• 缺少卸载清理逻辑：组件销毁时如果定时器还在运行，会造成内存泄漏。

修复要点 #

1. 每次更新count前先判断停止条件，满足则直接清理定时器
2. 点击停止按钮时，如果切换为停止状态，直接清理定时器
3. setState改用函数式更新，保证拿到的是最新的状态值
4. 新增componentWillUnmount生命周期，组件卸载时清理定时器

完整修正代码 #

import React, { Component } from "react";
import "./index.css";

export default class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 10,
      isStopped: false,
    };
    this.myInterval = null; // 提前声明定时器变量
  }

  handleClick = () => {
    this.setState(prevState => {
      const newIsStopped = !prevState.isStopped;
      // 切换为停止状态时直接清理定时器
      if (newIsStopped && this.myInterval) {
        clearInterval(this.myInterval);
        this.myInterval = null;
      }
      return { isStopped: newIsStopped };
    });
  };

  componentDidMount() {
    // 启动前先判断启动条件
    if (this.state.count > 0 && !this.state.isStopped) {
      this.myInterval = setInterval(() => {
        this.setState(prevState => {
          // 更新前先判断是否满足停止条件
          if (prevState.count <= 1 || prevState.isStopped) {
            clearInterval(this.myInterval);
            this.myInterval = null;
            return { count: Math.max(prevState.count - 1, 0) };
          }
          return { count: prevState.count - 1 };
        });
      }, 1000);
    }
  }

  componentWillUnmount() {
    // 组件卸载时清理定时器避免内存泄漏
    if (this.myInterval) {
      clearInterval(this.myInterval);
    }
  }

  render() {
    return (
      <div className="mt-100 layout-column align-items-center justify-content-center">
        <div className="timer-value" data-testid="timer-value">
          {this.state.count}
        </div>
        <button
          className="large"
          data-testid="stop-button"
          onClick={this.handleClick}
        >
          Stop Timer
        </button>
      </div>
    );
  }
}

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