setInterval内部循环未执行第二次迭代，useTypewriter钩子打字效果缺失字符

我明白你遇到的问题了——打字效果跳过了第二个字符"o"，控制台也没看到i=1的日志，最终输出变成了"hwdy"而不是预期的"howdy"。这个问题主要是闭包陷阱加上React 18严格模式的特性共同导致的，咱们一步步拆解原因和解决方案：

问题根源 #

• 闭包捕获的变量不是实时值：在setInterval的回调里，你调用setDisplayText时传入的更新函数会捕获外部的i变量，但React的状态更新是异步的。当更新函数实际执行时，i已经被i++递增了，导致它指向了下一个字符的索引。更糟的是，在React 18的严格模式下，开发环境会双重调用useEffect：第一次创建的interval会被立即清理，第二次创建的interval重新开始，但此时第一次interval可能已经执行了一次i++，导致新的interval里的逻辑直接跳过了索引1。
• 状态更新依赖外部可变变量：你依赖i这个在useEffect作用域里的变量来追踪当前字符位置，但i不是响应式的，闭包特性会让更新函数始终持有旧的i引用，进一步打乱字符拼接的逻辑。

修复方案 #

咱们有两种可靠的修复方式，推荐用第二种（ref追踪索引），更符合React Hooks的使用规范：

方案1：基于当前显示文本的长度获取下一个字符 #

既然displayText的长度就是当前已经打出的字符数，我们完全不需要额外的i变量，直接用prevText.length作为下一个字符的索引：

const { useState, useEffect } = React;

const useTypewriter = (text, speed = 50) => {
    const [displayText, setDisplayText] = useState('');

    useEffect(() => {
        const typingInterval = setInterval(() => {
            setDisplayText((prevText) => {
                if (prevText.length < text.length) {
                    console.log('当前索引:', prevText.length);
                    return prevText + text.charAt(prevText.length);
                } else {
                    clearInterval(typingInterval);
                    return prevText;
                }
            });
        }, speed);

        return () => {
            clearInterval(typingInterval);
        };
    }, [text, speed]);

    return displayText;
};

这个方法的好处是完全依赖状态本身来追踪进度，从根源上避免了闭包带来的变量捕获问题。

方案2：用useRef保存实时的索引值 #

useRef的.current属性是可变的，而且不会触发组件重新渲染，同时所有回调都能访问到它的实时值：

const { useState, useEffect, useRef } = React;

const useTypewriter = (text, speed = 50) => {
    const [displayText, setDisplayText] = useState('');
    const indexRef = useRef(0); // 用ref保存当前索引

    useEffect(() => {
        indexRef.current = 0; // 每次text变化时重置索引
        const typingInterval = setInterval(() => {
            if (indexRef.current < text.length) {
                setDisplayText(prev => prev + text.charAt(indexRef.current));
                console.log('当前索引:', indexRef.current);
                indexRef.current++;
            } else {
                clearInterval(typingInterval);
            }
        }, speed);

        return () => {
            clearInterval(typingInterval);
        };
    }, [text, speed]);

    return displayText;
};

这个方法更直观，适合需要明确追踪索引的场景，同时完美解决了闭包导致的变量不一致问题。

验证修复效果 #

把上面任意一种方案替换到你的代码里，打字效果就能正常输出"howdy"了，控制台也会依次打印索引0、1、2、3、4，不会再跳过第二个字符。

备注：内容来源于stack exchange，提问作者user8758206