React useState实现打字效果时缺失字符'e'的问题排查

你的打字效果中'e'缺失，主要是两个核心问题导致：

1. 未清理重复定时器 #

每次点击按钮都会启动新的定时器，如果之前的打字动画还没结束，多个定时器会同时修改char状态，互相干扰导致字符丢失或重复。

2. 定时器终止条件错误 #

原代码中if (i === str.length - 1)的判断逻辑有问题：当i等于最后一个字符的索引时，执行完字符添加后i会自增为str.length，此时不会触发清除定时器，导致后续还会执行一次无意义的添加（str[i]为undefined），同时可能在多定时器场景下提前中断正常字符的添加流程。

修复后的代码 #

import { useState, useRef } from "react";

export function Type() {
  const str = "hello my name is prateek";
  const [char, setChar] = useState("");
  const timerRef = useRef(null); // 用useRef持久化保存定时器ID

  function type() {
    // 启动新定时器前先清除旧的
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
    setChar(""); // 重置文本，支持多次点击重新开始
    let i = 0;

    timerRef.current = setInterval(() => {
      setChar(prev => prev + str[i]);
      i++;

      // 当i超出字符串索引范围时停止定时器
      if (i >= str.length) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    }, 1000);
  }

  return (
    <div>
      <h1>{char}</h1>
      <button onClick={type}>Type</button>
    </div>
  );
}

额外优化说明 #

• 用const定义str，避免组件重渲染时重复创建变量。
• 添加点击按钮时的文本重置逻辑，多次点击可重新触发打字动画。
• 用useRef管理定时器ID，确保跨渲染周期能正确清除旧定时器。

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