我不知道该如何描述这个bug，所以我只想解释一下发生了什么。
这个版本过于简化了，没有引起bug，但它有助于理解我的代码：
我有一个包含三个字符串strArr的数组。我以这种方式呈现它们：

<p>{strArr[0] + strArr[1]} <span>{strArr[2]}</span></p>

现在，如果所有的值都是静态的，一切都可以呈现。但是，在我的例子中，我首先将文本赋予strArr[0]，然后在一秒钟后，我将文本分配给strArr[1]，然后，在另一秒钟后，当我将文本分配给strArr[2]时，来自{strArr[0] + strArr[1]}的文本停止呈现。
实际上，我正在尝试制作一个CEO友好的输入动画，下面是我的实际代码（如果有必要，我使用Next.js 13.2中的app目录）。
现在你可以在这里看到这个bug的样子，如果我还没有修复它，下面是我的代码。

"use client";
import Style from "./page.module.css";
import Link from "next/link";
import { useEffect, useState } from "react";

type Props = {};

export default function TypeIn({}: Props) {
  // Animation length in ms
  const aniLength = 2000;
  const text: [string, string, string] = [
    "Hello, my name is",
    " ",
    "Dennis Lonoshchuk",
  ];
  const fullText = text[0] + text[1] + text[2];
  const [displayedText, setDisplayedText] = useState<[string, string, string]>([
    "",
    "",
    "",
  ]);

  useEffect(() => {
    const iterAmount = fullText.length; // subtract 1 because we start at 0 in the array
    let nextIter = aniLength / fullText.length;
    let i = 1;
    const interval = setInterval(() => {
      if (i <= text[0].length) {
        setDisplayedText([fullText.slice(0, i), "", ""]);
      } else if (i <= text[0].length + text[1].length) {
        setDisplayedText([
          displayedText[0],
          fullText.slice(text[0].length, i),
          "",
        ]);
      } else if (i <= text[0].length + text[1].length + text[2].length) {
        setDisplayedText([
          displayedText[0],
          displayedText[1],
          fullText.slice(text[0].length + text[1].length, i),
        ]);
      }
      if (i >= iterAmount) {
        clearInterval(interval);
      } else {
        i++;
      }
    }, nextIter);
  }, []);

  return (
    <>
      <h1 className="hidden">{fullText}</h1>
      <p
        className={`font-semibold text-4xl sm:text-6xl md:text-7xl
text-stroke-2 pt-[max(76px,32vh)]`}
      >
        {displayedText[0] + displayedText[1]}
        <Link
          href="/contact"
          className="text-transparent dark:text-stroke-white text-stroke-black text-stroke-2
dark:hover:text-white hover:text-black
transition-all ease-in-out duration-300"
        >
          {displayedText[2]}
        </Link>
      </p>
    </>
  );
}