在React中创建打字机效果（使用JS）

Question

我一直在尝试为我的网站创建打字机效果 - 目前动画可以工作，但每个字母出现两次（即我希望它说“欢迎！”，但它打印出“Wweellccoommee!!”。我相信这是一个异步问题，但我似乎想不出解决方法。

const useTypewriter = (text, speed = 20) => {
  const [displayText, setDisplayText] = useState('');


  useEffect(() => {
    let i = 0;
  
    const typeCharacter = () => {
      if (i < text.length) {
        setDisplayText(prevText => prevText + text.charAt(i));
        setTimeout(typeCharacter, speed);
      }
      i++;
    };
  
    typeCharacter(); 
  
  }, [text, speed]);

  return displayText;
};

我开始使用 setInterval 但遇到类似的异步问题。我也尝试过使用状态来跟踪我们所处的角色，但我尝试过的似乎都不起作用。

Answer 1

将

typeCharacter

函数方法更改为以下内容可修复该问题。我不知道为什么会发生这种情况，但似乎

setTimeout

不知何故错过了它。

// ...
const typeCharacter = () => {
  if (i < text.length) {
    setDisplayText(prevText => {
      const newText = `${prevText}${text.charAt(i)}`;

      i++;

      return newText
    });

    setTimeout(typeCharacter, speed);
  }
};
// ...