React中自定义打字动画异常问题排查求助

问题原因分析 #

1. Jobs页面动画仍运行：RenderTb组件的useEffect未监听startTyping变量，初始化时未判断状态就启动了动画逻辑；且未在startTyping变为false时停止动画。
2. 页面切换后动画异常：组件切换时未清除定时器，导致多个定时器实例同时运行，文本状态也未重置，切回页面后动画逻辑混乱。

修复方案 #

修改RenderTb组件逻辑，核心是监听startTyping状态变化、及时清除定时器、重置文本状态：

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

const RenderTb = ({ text, startTyping = false }) => {
  const [displayText, setDisplayText] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);
  const timerRef = useRef(null);

  useEffect(() => {
    if (startTyping) {
      // 重置状态，确保每次启动都是从头开始
      setDisplayText("");
      setCurrentIndex(0);
      
      timerRef.current = setInterval(() => {
        setCurrentIndex((prev) => {
          if (prev >= text.length) {
            clearInterval(timerRef.current);
            return prev;
          }
          setDisplayText((prev) => prev + text[prev]);
          return prev + 1;
        });
      }, 100);
    } else {
      // 停止动画并重置文本
      clearInterval(timerRef.current);
      setDisplayText("");
      setCurrentIndex(0);
    }

    // 组件卸载时清理定时器
    return () => clearInterval(timerRef.current);
  }, [startTyping, text]); // 监听startTyping和text的变化

  return <div>{displayText}</div>;
};

export default RenderTb;

关键修复点说明 #

• 将startTyping加入useEffect依赖数组，保证状态变化时触发逻辑更新
• 启动动画前重置displayText和currentIndex，避免残留状态影响新的打字流程
• startTyping为false时立即清除定时器并重置文本，终止动画
• 组件卸载时清除定时器，避免内存泄漏和残留定时器干扰后续逻辑

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