Javascript react can'；t从文档/窗口按键访问状态

给出下面的例子

#应用程序分区{
填充：10px；
边框：1px实心；
利润率：10px0；
}
新闻组：焦点{
背景：红色；
}
新闻组：焦点：前{
内容：“重点”；
显示：块；
}

让{useState，useRef，Fragment}=React；
让App=（）=>{
let[，forceUpdate]=useState（）；
让[num，setNum]=useState（0）；
让history=useRef（'null'）；
让keyPressHandler=（）=>{
history.current=num；
//只是为了强制更新
forceUpdate（Date.now（））；
}; 
返回(
{setNum（Date.now（））}>更新状态
此div有一个按键侦听器。
现在，无论按什么键，它都会将状态保存在ref中，在单击按钮时会发生更改。
单击按钮更改状态，然后聚焦此div，然后按任意键将状态保存在ref中
状态：{num}
历史记录：{History.current}
); 
}; 
ReactDOM.render（，document.querySelector（“#app”）；

我认为您必须在每次更新中注册侦听器。或者，您可以将状态存储在服务、变量或使用useRef钩子中

演示

让{useffect，useState}=反应；
让应用程序=（）=>{
let[val，setVal]=useState（'初始值'）
useffect（（）=>{
window.addEventListener（“按键”，keyPressHandler）；
//文件。添加了监听器（“按键”，按键处理程序）；
return（）=>{
window.removeEventListener（“keypress”，keyPressHandler）；
}
});
让keyPressHandler=（{key}）=>{
console.log（val）
setVal（val+“-”+键）；
};
返回(
{val}
);
};
ReactDOM.render（，document.querySelector（“#app”）；

原因是，当窗口重新渲染器仅在第一次渲染中访问

val

变量时，它无法在后续渲染中访问新的

val

状态挂钩也有一个回调，在其中传递当前状态

在这种情况下，使用回调读取最新状态值，并确保在添加它之前具有最新状态值，这将解决问题

例如：

让{useffect，useState}=反应；
让应用程序=（）=>{
let[val，setVal]=useState（'初始值'）
useffect（（）=>{
window.addEventListener（“按键”，keyPressHandler）；
//文件。添加了监听器（“按键”，按键处理程序）；
}, []);
让keyPressHandler=（{key}）=>{
console.log（val）
setVal（val=>val+“-”+键）/*可能重复刚才尝试的
按键
相同的问题，我不认为这是一个问题，你想证明什么，如果你不使用sate，只需使用
history.current=history.current+'-'+key
@saurabh我有两个状态和
历史。当其中一个stat这就是我的问题，如果你使用的是
useref
，那么你可以简单地使用'history.current=history.current+'-'+key'，对于状态，你可以直接在jsx中使用val，这听起来很重，你不觉得吗？我的意思是我不能只使用class组件和我不必在它依赖的每个更新上注册侦听器。您还可以将您的状态保存在组件之外的服务或变量中。例如，让AppState={}。这与使用statePerformance的目的背道而驰。性能不应该是您的首要问题。如果您有性能问题，您可以使用服务或变量作为瞬态。这可能会解决问题，但我正在寻找一个更彻底的答案来解释为什么会发生这种情况，因为您知道，在类组件中，我不必执行任何这些操作。问题是，
react无法从文档/窗口按键访问状态，而且所使用的两个演示都不使用类。您的解决方案仅在我想更新状态时有效，但在某些情况下，我只想访问新状态，并在不更新状态的情况下对其进行处理。我没有得到，您能举个例子吗？Havi如果第二个状态违背了目的，那么现在每个按键都会有一个重新启动