在 React 中为音频添加字幕

Question

我正在尝试为我用 React 编写的应用程序教程添加字幕。

我一直在尝试使用 setTimeout，如下所示。它会在开始时正常运行。

const [paragraphs] = useState(IntroContent.intro.paragraphs);
const [displayParagraph, setDisplayParagraph] = useState("");
const [index, setIndex] = useState(0);

const timeoutDelays = [0, 5000, 4000, 5000, 5000, 11000, 10000, 7000, 0];

const changeParagraph = () => {
  setDisplayParagraph(paragraphs[index]);
  setIndex(index + 1);
}

setTimeout(changeParagraph, timeoutDelays[index]);

字幕以足够接近的时间滚动，但是当它到达第三个字幕时，它们开始转到上一个字幕，然后在间隔后再次更改为正确的字幕，然后继续这样做直到结束。

我已经尝试过 clearTimeout，但它没有解决我的问题。

Answer 1

因为你调用了setState 2次（setDisplayParagraph和setIndex）意味着每个索引，它会re-render 2次，也调用setTimeout 2次。您应该在使用 useEffect 渲染组件后调用函数 setTimeout 并且它应该仅在 index 更改时调用：

useEffect(() => {
    setTimeout(changeParagraph, timeoutDelays[index]);
}, [index])

在 React 中为音频添加字幕

Adding Subtitles to Audio in React

settimeout

reactjs