处理此类情况的最佳方法是查看事件处理程序中的操作。如果仅使用先前状态设置状态，则最好使用回调模式并仅在初始安装时注册事件侦听器。如果您不使用callback pattern（https://reactjs.org/docs/hooks- reference.html#usecallback），则事件侦听器将使用侦听器参考及其词法范围，但会创建一个新函数，并在新的渲染，因此在处理程序中您将无法进入更新状态
const [userText, setUserText] = useState('');
const handleUserKeyPress = useCallback(event => {
const { key, keyCode } = event;
if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
setUserText(prevUserText => `${prevUserText}${key}`);
}
}, []);
useEffect(() => {
window.addEventListener('keydown', handleUserKeyPress);
return () => {
window.removeEventListener('keydown', handleUserKeyPress);
};
}, [handleUserKeyPress]);
return (
<div>
<h1>Feel free to type!</h1>
<blockquote>{userText}</blockquote>
</div>
);
602392714
清零编程群