反应 useCallback 钩子，没有收到更新的依赖 state 值

Question

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

任何人都知道为什么我的handleKeydown方法没有收到更新的activeTab state 变量？ 我认为因为我添加了activeTab作为依赖项，所以回调总是会收到更新的值。 然而，情况似乎并非如此。

正如预期的那样，每次按下一个键时都会调用回调； 但是， activeTab始终为null ，即初始值。 任何帮助表示赞赏！

（我已经包含了一个代码片段和一个 jsfiddle 链接（因为该片段似乎由于某种原因没有呈现。jsfiddle 至少呈现了大声笑）。）

https://jsfiddle.net/Tom904/98veow5b/4/

 const Tabs = () => { const [activeTab, setActiveTab] = React.useState(null); const handleKeydown = React.useCallback(event => { console.log(activeTab); // if a user hits the escape key while a tab is active... if (event.key === 'Escape' && activeTab) { setActiveTab(null); } }, [activeTab]); React.useEffect(() => { window.addEventListener('keydown', handleKeydown); return () => { window.removeEventListener('keydown', handleKeydown); }; }, []); return ( <div> <button onClick={() => setActiveTab('1')}> 1 </button> <button onClick={() => setActiveTab('2')}> 2 </button> <button onClick={() => setActiveTab('3')}> 3 </button> <div> Active tab: {activeTab || 'None'} </div> </div> ) } ReactDOM.render( <Tabs/>, document.getElementById('root') );

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>

Answer 1

每次更改 activeTab 时都会更新handleKeydown activeTab 。 但是，将useEffect绑定到keydown事件的 useEffect 仅在挂载时调用。 因此，尽管重新创建了 function，但初始值为activeTab的原始实例由事件处理程序调用。

这里的useCallback是多余的，也可以使用useState的功能更新形式来避免activeTab依赖：

 const Tabs = () => { const [activeTab, setActiveTab] = React.useState(null); React.useEffect(() => { const handleKeydown = event => { setActiveTab(activeTab => event.key === 'Escape' && activeTab? null: activeTab); }; window.addEventListener('keydown', handleKeydown); return () => { window.removeEventListener('keydown', handleKeydown); }; }, []); return ( <div> <button onClick={() => setActiveTab('1')}> 1 </button> <button onClick={() => setActiveTab('2')}> 2 </button> <button onClick={() => setActiveTab('3')}> 3 </button> <div> Active tab: {activeTab || 'None'} </div> </div> ) } ReactDOM.render( <Tabs/>, document.getElementById('root') );

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>