反應 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>