在React中显示状态时，基于增量状态对不可变字符串状态进行切片

Question

我在这里简化了我的问题结构:CodeSandbox

由一个useGenText()钩子组成，模拟每n秒生成一个单词，该值为只读，因此不能修改该钩子．useLineIndex()钩子模拟了每m秒活动线的增加，并设置了增加和减少活动线的方法。

我想要它显示字，并移动到新的行每次lineIndex更新。在换行符上，我希望它显示前一行的继续文本。使用下面的代码，它总是显示前一行的整个文本。

useEffect(() => {
const updatedLines = [...lines];
updatedLines[currentLineIndex] = transcript;
setLines(updatedLines);
}, [transcript, currentLineIndex]);
...
//Output:
-burned house stone stone bird
-burned house stone stone bird stone shopping cart flying stone stone stone
//Desired Output:
-burned house stone stone bird
-stone shopping cart flying stone stone stone

我怎样才能达到这样的期望行为?我还想到将成绩单复制到一个新的状态和.slice()，但没有得到关于字符串中换行的数据，以及如何更新到新的行字符串，同时订阅成绩单内容。

Answer 1

将transcript的当前length保存在ref中。每当transcript或currentLineIndex发生变化时，切片ref forward中的所有文本，并将其添加到当前行。当transcript发生变化时，更新另一个useEffect块中的ref。使用一个updatater函数根据之前的值(sandbox)创建一个新状态:

useEffect(() => {
const length = len.current;
setLines((prev) => {
const updatedLines = [...prev];
const val = updatedLines[currentLineIndex] ? ? '';
updatedLines[currentLineIndex] = `${val} ${transcript.slice(length)}`.trim();
return updatedLines;
});
}, [transcript, currentLineIndex]);
useEffect(() => {
len.current = transcript.length;
}, [transcript]);