React游戏计时器重置引发过度重渲染问题求助

问题根源 #

1. 组件函数体中直接调用setState：原Timer组件在函数体里通过if(resetTime === true)直接执行setRunningTime和setResetTime，触发无限重渲染循环——每次渲染修改状态，状态变化又引发新渲染，导致控制台报错。
2. 跨组件状态修改冲突：子组件直接调用父组件的setResetTime，在计时器每秒更新的过程中点击重置，会引发父子组件重渲染冲突，导致按钮偶尔无响应。
3. 定时器未正确清理：重置操作未清除现有定时器，可能导致多个定时器同时运行，打乱计时逻辑。

解决方案 #

1. 将重置逻辑移至useEffect：仅在重置触发信号变化时执行重置，避免在组件渲染周期外修改状态。
2. 用计数器代替布尔值做重置触发信号：父组件通过递增计数器触发重置，避免布尔值来回切换的重复触发问题，同时子组件无需修改父组件状态。
3. 用useRef管理定时器ID：确保重置时能清除旧定时器，避免多定时器并行运行。

修改后的代码 #

Timer组件

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

export default function Timer({
    characters,
    guessed,
    resetTrigger,
}) {
    const initialTime = 0;
    const [runningTime, setRunningTime] = useState(initialTime);
    const timerRef = useRef(null);

    // 响应重置触发，重置计时器
    useEffect(() => {
        // 清除现有定时器
        if (timerRef.current) {
            clearInterval(timerRef.current);
            timerRef.current = null;
        }
        // 重置计时数值
        setRunningTime(initialTime);
    }, [resetTrigger, initialTime]);

    // 处理计时逻辑
    useEffect(() => {
        // 已通关则不启动定时器
        if (guessed.length >= characters.length) return;

        // 启动新定时器
        timerRef.current = setInterval(() => {
            setRunningTime(prevTime => prevTime + 1);
        }, 1000);

        // 组件卸载或依赖变化时清除定时器
        return () => {
            if (timerRef.current) {
                clearInterval(timerRef.current);
                timerRef.current = null;
            }
        };
    }, [characters.length, guessed.length, resetTrigger]);

    return <h4>{runningTime}</h4>;
}

父组件

// 父组件中定义重置触发状态
const [resetTrigger, setResetTrigger] = useState(0);

function resetGame() {
    handleClose();
    setGuess(initialGuess);
    setGuessed(initialGuessed);
    // 通过递增计数器触发重置
    setResetTrigger(prev => prev + 1);
}

// 渲染Timer组件时传入重置触发信号
<Timer 
    characters={characters} 
    guessed={guessed} 
    resetTrigger={resetTrigger} 
/>

<button onClick={resetGame}>Reset Game</button>

说明 #

• 父组件通过resetTrigger计数器的变化通知子组件重置，避免了子组件直接修改父组件状态的冲突。
• useRef保存的定时器ID确保每次重置都能清除旧定时器，不会出现多定时器并行的问题。
• 计时逻辑的useEffect依赖resetTrigger，确保重置后能重新启动正确的计时器。

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