React useEffect实现打字效果时缺失第二个字符的问题求助

你的代码存在两个核心问题，直接导致了字符跳过的异常现象：

1. 条件判断错误，遗漏最后一个字符
   你写的判断条件是initialIndex < message.length-1，这意味着当initialIndex等于message.length-1（也就是最后一个字符的索引）时，循环会直接终止，最后一个字符永远不会被添加到文本中。而你觉得“添加两个空格就正常”，其实是视觉上的错觉——此时原字符串的第一个字符变成了第三个，你误以为的“正常”其实只是跳过的位置发生了变化，最后一个字符依然会被遗漏。

2. useEffect缺少依赖数组与清理逻辑，引发多定时器冲突
   你的useEffect没有设置依赖数组（末尾的[]），也没有清理定时器的逻辑。这会导致每次组件重新渲染时，这个effect都会重复执行：重新初始化索引、清空文本、创建新的定时器。旧的定时器不会被销毁，多个定时器同时运行，各自操作闭包里的索引变量，就会出现字符被跳过、重复的混乱情况。

修正后的代码 #

useEffect(() => {
  const message = 'This is not working';
  let currentIndex = 0;
  setText('');

  const typingInterval = setInterval(() => {
    // 调整条件，确保所有字符都能被遍历到
    if (currentIndex < message.length) {
      setText((prevText) => prevText + message[currentIndex]);
      currentIndex++;
    } else {
      clearInterval(typingInterval);
    }
  }, 100);

  // 清理函数：组件卸载或effect重新执行时销毁定时器
  return () => clearInterval(typingInterval);
}, []); // 空依赖数组确保effect仅在组件挂载时执行一次

修正说明 #

• 把判断条件改为currentIndex < message.length，覆盖从0到message.length-1的所有字符索引，确保每个字符都能被添加。
• 添加空依赖数组[]，限制effect仅在组件首次挂载时执行一次，避免重复创建定时器。
• 新增清理函数，确保组件卸载或后续effect触发时，旧定时器会被及时销毁，避免内存泄漏和逻辑冲突。

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