使用事件侦听器键关闭时 React 钩子状态问题

Question

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

正在发生的事情是，当我为 useState 使用 react 钩子时，它工作正常，但是，我在 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);
}
}

Answer 1

因此，解决此问题的是将handleKeydown添加到useEffect的依赖项数组中。为什么会出现这种情况的确切原因我没有缩小 100%，但我有一个非常扎实的想法。