React键盘事件触发时state显示为空字符串的问题排查

你的猜测不正确，核心问题是React闭包陷阱导致的旧状态捕获：

• 组件首次渲染时，pin的初始值是空字符串，此时useEffect执行，给document绑定了当时创建的handleKeyDown函数。这个函数会捕获当前作用域下的pin值（空字符串）。
• 后续每次点击按钮更新pin时，组件会重新渲染，生成新的handleKeyDown和addNumber函数，但因为useEffect的依赖数组是空的，它不会重新执行，所以document上绑定的始终是第一次渲染时的旧handleKeyDown。当物理键盘触发事件时，调用的是旧的addNumber，里面的pin自然是初始的空字符串，所以console.log(pin)输出空。
• 至于setPin能正常工作，是因为你使用了函数式更新（setPin((prevPin) => ...)）。这种方式会把当前最新的状态作为参数传入回调，不受闭包中旧值的影响，所以总能正确更新状态。

解决方案一：修复闭包，绑定最新的事件处理函数 #

通过useCallback缓存事件处理函数，并将其加入useEffect的依赖数组，确保每次状态更新时，document上的事件监听都会更新为捕获最新状态的函数：

export default function Keypad() {
    const [pin, setPin] = useState("");

    const addNumber = useCallback((num) => {
        console.log(pin); // 现在能打印最新的pin值
        if (pin.length < 6) {
            setPin((prevPin) => [...prevPin, num.toString()]);
        }
    }, [pin]);

    const handleKeyClick = useCallback((num) => {
        addNumber(num);
    }, [addNumber]);

    const handleKeyDown = useCallback((e) => {
        if (!isNaN(e.key)) {
            addNumber(e.key);
        }
    }, [addNumber]);

    useEffect(() => {
        document.addEventListener("keydown", handleKeyDown);
        return () => {
            document.removeEventListener("keydown", handleKeyDown);
        };
    }, [handleKeyDown]);

    return (
        <div>
            <button onClick={() => handleKeyClick(9)}>9</button>
        </div>
    );
}

解决方案二：依赖函数式更新，避开闭包问题 #

把长度判断逻辑移到setPin的函数式回调中，直接使用React传入的最新状态参数，完全不需要依赖闭包中的pin值：

export default function Keypad() {
    const [pin, setPin] = useState("");

    function addNumber(num) {
        setPin((prevPin) => {
            console.log(prevPin); // 打印当前最新的pin状态
            return prevPin.length < 6 ? [...prevPin, num.toString()] : prevPin;
        });
    }

    function handleKeyClick(num) {
        addNumber(num);
    }

    function handleKeyDown(e) {
        if (!isNaN(e.key)) {
            addNumber(e.key);
        }
    }

    useEffect(() => {
        document.addEventListener("keydown", handleKeyDown);
        return () => {
            document.removeEventListener("keydown", handleKeyDown);
        };
    }, []);

    return (
        <div>
            <button onClick={() => handleKeyClick(9)}>9</button>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者Shahriar