Javascript 通过在数组中循环来响应元素的文本更改

我有一个如下所示的文本项数组

const sentences  = ['sentence one', 'sentence two', 'sentence three', 'sentence four']

我试图让元素文本在每个句子中循环显示五秒钟，先向外键入效果，然后是退格效果，然后再键入下一个句子和循环

我的代码将键入第一个句子，退格，键入第二个句子，然后它将退格，再次键入第二个句子，一遍又一遍。。。知道我做错了什么吗

这是我的密码

  const sentences = ['sentence one', 'sentence two', 'sentence three', 'sentence four']
  const [sentence, setSentence] = useState(sentences[0])
  let index = 0
  if(index < 3) {
    setInterval(() => {
      index++
      setSentence(sentences[index])
    }, 5000)
  }

const句子=[“第一句”、“第二句”、“第三句”、“第四句”]
const[句子，setcentence]=使用状态（句子[0]）
设指数=0
如果（指数<3）{
设置间隔（（）=>{
索引++
setcentence（句子[索引]）
}, 5000)
}

每次装入组件时，您的

索引

变量将再次设置为0<代码>索引变量应存储在以下状态：

const [index, setIndex] = useState(0)

您需要在

useffect

中设置时间间隔，以防止无限重装载。然后在

useffect

中：

useEffect(() => {
  const interval = setInterval(() => {
      setIndex(index + 1)
    }, 5000)

  return (() => clearInterval(interval)) //This is a cleanup function
})

---

最后，您可以像

句子[index]

那样呈现句子，而不需要

句子

状态变量。你可以看看我为这个问题创建的代码，这是你需要的，我刚刚编辑了上面的代码沙盒

导入“/styles.css”； 从“react”导入{useState，useffect}； 常量loopArr=[ “第1句”， “第2句”， “第3句”， “第4句”， “第5句”， “第5句第5句” ]; 导出默认函数App（）{ const[index，setIndex]=useState（0）； useffect（（）=>{ const intervaldelaymillizes=loopArr[index]。长度*500； 常量间隔=设置间隔（（）=>{ setIndex（（prevIndex）=>{ //如果当前索引大于数组大小，则重置索引 返回prevIndex+1clearInterval（interval）； }); 返回( {loopArr[index]} ); }

---

我成功了，谢谢你的帮助。你介意解释一下清理功能是做什么的吗？很高兴它有帮助，如果它回答了你的问题，请接受答案：）当然，清理功能基本上会在你的组件卸载时中断正在进行的功能。有比我更好的资源来解释这一点。看看这个有用的教程（我在那里学到的），我只是尝试了一下有没有清理功能，并意识到如果没有经过几次迭代，文本将显示数组中的多个项目，但在它们之间闪烁。添加清理功能后，这种情况不再发生。谢谢你的链接，我会看看的，我没想到会有这种行为。当您的组件卸载时可能会发生这种情况，当索引得到更新时，可能会发生这种情况。由于setInterval是异步的，因此可能会发生意外行为。猜猜看有什么建议可以阻止这种意外的行为吗？嗨，我试着用这种方法来尝试，但结果只是重复了第一句话，并且克服了你共享代码的问题？在这里可以看到上面沙箱的输出

import "./styles.css";
import { useState, useEffect } from "react";

const loopArr = [
  "sentence1",
  "sentence2",
  "sentence3",
  "sentence4",
  "sentence5",
  "sentence5 sentence5"
];

export default function App() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const intervalDelayMilliseconds = loopArr[index].length * 500;
    const interval = setInterval(() => {
      setIndex((prevIndex) => {
        // reset index if current index is greater than array size
        return prevIndex + 1 < loopArr.length ? prevIndex + 1 : 0;
      });
    }, intervalDelayMilliseconds);

    return () => clearInterval(interval);
  });

  return (
    <div className="App">
      <div class="typewriter">
        <h1 key={loopArr[index]}>{loopArr[index]}</h1>
      </div>
    </div>
  );
}