Javascript React useCallback钩子，未接收更新的依赖项状态值

下面是我试图解决的问题的简化版本

有人知道为什么我的

handleKeydown

方法没有收到更新的

activeTab

状态变量吗？我认为，因为我添加了

activeTab

作为依赖项，所以回调将始终接收更新的值。然而，情况似乎并非如此

正如预期的那样，每次按下一个键时都会调用回调；但是，

activeTab

始终是初始值

null

。感谢您的帮助

（我包括了一个代码段和一个JSFIDLE链接（因为出于某种原因，代码段似乎没有呈现。JSFIDLE至少呈现lol）。）

const Tabs=（）=>{
const[activeTab，setActiveTab]=React.useState（null）；
const handleKeydown=React.useCallback（事件=>{
log（activeTab）；
//如果用户在选项卡处于活动状态时按escape键。。。
if（event.key==='Escape'&&activeTab）{
setActiveTab（空）；
}
}，[activeTab]）；
React.useffect（（）=>{
window.addEventListener（'keydown'，handleKeydown）；
return（）=>{
window.removeEventListener（'keydown'，handleKeydown）；
};
}, []);
返回(
setActiveTab（'1'）}>
1.
setActiveTab（'2'）}>
2.
setActiveTab（'3'）}>
3.
活动选项卡：{activeTab | |'None'}
)
}
ReactDOM.render(
,
document.getElementById（'root'））
);
每次更改
activeTab
，都会更新
handleKeydown
功能。但是，将函数绑定到
keydown
事件的
useffect
仅在装载时调用。因此，尽管重新创建了函数，但事件处理程序调用初始值为
activeTab
的原始实例

这里的
useCallback
是多余的，您也可以使用
useState
的形式来避免
activeTab
依赖性：


const Tabs=（）=>{
const[activeTab，setActiveTab]=React.useState（null）；
React.useffect（（）=>{
const handleKeydown=事件=>{
setActiveTab（activeTab=>event.key==='Escape'&&activeTab？null:activeTab）；
};
window.addEventListener（'keydown'，handleKeydown）；
return（）=>{
window.removeEventListener（'keydown'，handleKeydown）；
};
}, []);
返回(
setActiveTab（'1'）}>
1.
setActiveTab（'2'）}>
2.
setActiveTab（'3'）}>
3.
活动选项卡：{activeTab | |'None'}
)
}
ReactDOM.render(
,
document.getElementById（'root'））
);

谢谢！这解决了我的问题！谢天谢地，我没有遇到同样的问题，我非常了解我的生命周期，但这个问题（和答案）帮助我发现了代码中的一个bug:Dlo/。不客气：）