使用事件侦听器 keydown 时的 React Hooks 状态问题答案

【问题标题】：React Hooks State Issue When Using Event Listener keydown使用事件侦听器 keydown 时的 React Hooks 状态问题
【发布时间】：2020-01-05 03:07:05
【问题描述】：

这是我的回购https://github.com/extrapractice/lambda-calculator/tree/revised

发生的情况是，当我对 useState 使用反应钩子时，它工作正常，但是，我在 useEffect 上设置了一个事件侦听器，用于按下某个键（它是一个计算器），但由于某种原因，一旦按下键并触发事件，反应状态未定义？

为什么会发生这种情况，我该如何纠正？

const Calculator = (props) => {
const [ display, setDisplay ] = useState('');

useEffect(() => {
    window.addEventListener('keydown', handlekeyDown);
    // window.addEventListener('keydown', handleEquals);
    return () => {
        window.addEventListener('keydown', handlekeyDown);
        // window.addEventListener('keydown', handleEquals);
    };
}, []);

function handlekeyDown(e) {
    e.preventDefault();
    const current = e.key;
    const values = [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/'];
    if (values.includes(current)) {
        let value = current;
        setDisplay((prev) => prev + value);
    }
}

 function handleEquals(e) {
    const value = e.key
    console.log(display)
    if (value === '=') {
        const solution = math.evaluate(display)
        const histEntry = { problem: display, solution: solution };
        props.setHistory((prev) => [ ...prev, histEntry ]);
        setDisplay(solution);
    }
}

function addToString(e) {
    console.log(e.target)
    let value = e.target.value;
    if (value === '=') {
        const histEntry = { problem: display, solution: math.evaluate(display) };
        props.setHistory((prev) => [ ...prev, histEntry ]);
        setDisplay(math.evaluate(display));
    } else {
        setDisplay((prev) => prev + value);
    }
}

【问题讨论】：

分享所有的组件代码，以便更轻松地查看display 状态更新的内容、地点和时间？另外，包括math.evaluate 的代码。仅供参考，您在效果的返回函数中有错误，它应该删除事件侦听器。
我在您的仓库中查看了整个组件代码，还看到 math.evaluate 是 math.js 并返回一个数字而不是字符串。试图重现您的问题，但尚未成功。 codesandbox
很好地了解事件监听器，问题已解决，我的解决方案如下，知道为什么会这样吗？
不是真的，不是，因为这样做只会在每次更新 handlekeyDown 函数时触发效果。也许是因为你定义了handlekeyDown 在效果之后，因此它被 undefined 触发，然后一旦它被定义，它就会再次被触发（现在，因为在依赖数组中）。不过，这似乎不太可能。
有趣，我对反应钩子比较陌生，所以这是我的介绍项目之一，只是为了熟悉它们......确实会尝试更深入地研究代码，看看为什么它只能工作当包含在依赖数组中时，感谢您的帮助 Drew。

标签： reactjs react-hooks

【解决方案1】：

所以解决这个问题的方法是将 handleKeydown 添加到 useEffect 的依赖数组中。造成这种情况的确切原因我没有缩小 100%，但我有一个非常可靠的想法。

【讨论】：