React无状态函数组件中onClick事件无法触发问题求助

问题根源分析 #

初始代码（普通变量）的问题 #

• 用let second = 0这类普通变量存储状态，点击修改变量时，React无法感知普通变量的变化，不会触发组件重渲染，导致界面上的时间不会更新。
• 这里的onClick={play}其实能正常触发函数，只是变量变化后界面没刷新，看起来像没生效。

重构后（useState）的潜在问题 #

你重构代码里onClick={() => play()}的写法是正确的，大概率不是onClick本身的问题，可能是细节没处理好：

• 初始second为0，点击后会设置为59，界面应更新为25:59，如果没生效可以先排查：
  1. 是否正确引入ReactDOM（Codepen环境下需确保依赖完整）；
  2. fa-play图标是否加载成功，若图标未显示，可能误以为按钮无点击区域，可尝试点击按钮空白位置测试。

倒计时功能完整实现方案 #

结合需求，用useState+useEffect+setInterval实现稳定的倒计时，同时处理定时器的内存泄漏问题：

import React, { useState, useEffect, useRef } from "react";

const Clock = () => {
  const [minute, setMinute] = useState(25);
  const [second, setSecond] = useState(0);
  const timerRef = useRef(null); // 用ref存储定时器ID，避免渲染丢失引用

  const play = () => {
    // 清除已有定时器，防止多次点击创建多个定时任务
    if (timerRef.current) clearInterval(timerRef.current);
    
    timerRef.current = setInterval(() => {
      setSecond(prevSec => {
        if (prevSec === 0) {
          setMinute(prevMin => {
            if (prevMin === 0) {
              // 倒计时结束，清理定时器
              clearInterval(timerRef.current);
              return 0;
            }
            return prevMin - 1;
          });
          return 59;
        }
        return prevSec - 1;
      });
    }, 1000);
  };

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => {
      if (timerRef.current) clearInterval(timerRef.current);
    };
  }, []);

  const min = ('0' + minute).slice(-2);
  const sec = ('0' + second).slice(-2);

  return (
    <div>
      <div id="start_stop" onClick={play}>
        <i className="fas fa-play"></i> {/* JSX中需用className替代class */}
      </div>
      <div id="time-left">{min}:{sec}</div>
    </div>
  );
};

ReactDOM.render(<Clock />, document.getElementById("root"));

关键注意点 #

• 用useRef存储定时器ID：避免函数组件每次渲染时丢失定时器引用，确保能正常清除定时任务；
• 函数式更新状态：setSecond(prevSec => ...)这种写法依赖前一次的状态值，能避免闭包导致的状态更新异常；
• JSX属性规范：React中需用className代替HTML的class属性，否则会引发语法错误；
• 清理定时器：组件卸载时清除定时器，防止内存泄漏。

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