以前触发的递归函数看不到新道具

Question

我有一个函数，该函数接受文本并将其逐个字符渲染为DOM以创建打字机效果。为此，该函数会不断为每个字符反复调用自身。

有时我想跳到另一个水平，所以我的props.chapter发生了变化，我的textArray得到了更新。但是，在props和textArray更改之前调用的函数在每次调用自身时仍会看到旧值。

如果我在更改道具后第二次触发该功能，则这两个调用同时运行，其中一个显示旧数据，另一个显示新数据。

我正在使用带有钩子的React。

这是我的功能：

const typewriter = () => {
            console.log(props.chapter); //will always show the props at invokation
            sContents = [''];
            iRow = Math.max(0, iIndex - iScrollAt);
            while (iRow < iIndex) {
                sContents[iIndex] += textArray[iRow++];
                sContents[iIndex] = '';
            }

            //This is the text I render to the DOM later
            setText((text) => {
                text[iIndex] = <p key={`line-${iIndex}`}>{sContents[iIndex] + textArray[iIndex].substring(0, iTextPos)}<span className='caret'></span></p>;
                return [...text];
            }); 

            if (iTextPos++ == iArrLength) {
                iTextPos = 0;
                iIndex++;
                if (iIndex != textArray.length) {
                    setSFXon(false);
                    setTimeout(() => {
                        //Clear carat from previous line
                        setText((text) => {
                            if(text[iIndex -1]){
                                text[iIndex-1] = <p key={`line-${iIndex-1}`}>{sContents[iIndex-1] + textArray[iIndex-1].substring(0, iArrLength)}</p>;
                            }
                            text[iIndex] = <p key={`line-${iIndex}`}><span className='caret'></span></p>
                            return [...text];
                        });
                        //Write next line
                        iArrLength = textArray[iIndex].length; //Next line's length
                       //==================
                       //RECURSIVE CALL HERE
                       //==================
                        typewriter()
                    }, 1500);
                }else{
                    //Make last line carat blink
                    setText((text) => {
                        text[iIndex-1] = <p key={`line-${iIndex-1}`}>{sContents[iIndex-1] + textArray[iIndex-1].substring(0, iArrLength)}<span className='caret blink'></span></p>;
                        return [...text];
                    });
                }
            } else {
                //==================
                // RECURSIVE CALL HERE
                //==================
                setTimeout(() => typewriter(), iSpeed);
            }
    }