React中useEffect无法正常执行命名setInterval问题求助

你的代码核心问题在于useEffect的依赖数组设置错误，同时缺少初始状态同步逻辑：

1. 当前useEffect依赖secondsToUpdate，每次调用setSecondsToUpdate更新状态后，都会触发useEffect重新执行——旧定时器被清除，新定时器被创建。这个循环会导致定时器刚创建就被销毁，根本没机会按预期每秒执行一次。
2. 组件挂载后没有立即执行changeMinutesToUpdate，初始状态secondsToUpdate会一直显示0，直到定时器第一次触发（但因为依赖问题，这一步根本不会发生）。
3. 控制台出现mount -> unmount -> mount的日志，是因为状态更新触发组件重新渲染，连带useEffect的销毁和重建流程反复执行。

interface IMinutesRemainingProps {
    $nextUpdateDateTime: string;
}

function MinutesRemaining({ $nextUpdateDateTime }: IMinutesRemainingProps) {
    const [secondsToUpdate, setSecondsToUpdate] = useState(0);
    
    const changeMinutesToUpdate = () => {
        const currentDateTime = new Date().getTime();
        const nextUpdate = new Date($nextUpdateDateTime).getTime();
        // 限制剩余秒数最小值为0，避免出现负数
        const remainingSeconds = Math.max(Math.round((nextUpdate - currentDateTime) / 1000), 0);
        setSecondsToUpdate(remainingSeconds);
    };

    useEffect(() => {
        // 挂载后立即执行一次，同步初始剩余时间
        changeMinutesToUpdate();
        
        // 创建每秒执行的定时器
        const updateRespawnInterval = setInterval(changeMinutesToUpdate, 1000);
        
        // 组件卸载或目标时间变化时清除定时器
        return () => clearInterval(updateRespawnInterval);
    }, [$nextUpdateDateTime]); // 仅当外部传入的目标更新时间变化时，重新初始化定时器

    return (
        <Minutes>
            ⟳ {secondsToUpdate}s
        </Minutes>
    );
}

• 修正依赖数组：将依赖从secondsToUpdate改为$nextUpdateDateTime，只有当外部传入的目标更新时间变化时，才重新创建定时器，避免不必要的定时器销毁重建循环。
• 添加初始同步：在useEffect内部先调用一次changeMinutesToUpdate，确保组件挂载后立即显示正确的剩余秒数，无需等待1秒。
• 处理负数边界：用Math.max限制剩余秒数最小值为0，避免目标时间过期后出现负数显示。

如果修改后问题仍然存在，检查父组件传递的$nextUpdateDateTime是否存在每次渲染都生成新字符串的情况（比如在父组件中直接写new Date().toString()作为props），这会导致子组件反复卸载重新挂载，影响定时器正常工作。

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