為什麼在 React Hooks 中使用事件監聽器處理事件時狀態不正確？

錯誤的React Hooks 與事件監聽器的行為

問題：當使用React Hooks 並透過事件監聽器處理事件時，控制台中顯示的狀態是不正確的。具體來說，點擊卡片內的按鈕應該會顯示更新後的狀態（卡片數量），但它錯誤地顯示了原始狀態。

程式碼說明：

問題這是由於如何使用 useState 掛鉤在功能元件中註冊事件偵聽器而產生的。在提供的範例中，handleCardClick 函數是在 CardsProvider 功能元件中定義的，並且在呼叫時它始終引用初始狀態。

另一方面，handleButtonClick 是在 Card 功能元件中定義的，並作為支柱。由於它在每次渲染時重新註冊，因此它引用新鮮狀態。因此，當handleCardClick顯示錯誤的狀態時，handleButtonClick顯示正確的狀態。

解：

1。可變狀態：

使用 useRef 取代 useState 來儲存可變狀態。但是，不建議將此方法用於更新狀態，因為它在類別和函數組件中都是反模式。

2.狀態更新器函數：

在事件偵聽器中使用接收新鮮狀態而不是過時狀態的狀態更新器函數。

3.手動事件監聽器重新註冊：

每次重新註冊事件監聽器，確保其能夠存取最新狀態。

4.內建事件處理：

透過將事件監聽器直接傳遞到DOM 事件處理程序中來使用React 內建事件處理，例如onClick={eventListener} 。

注意：在React 16.8的最終版本中，useState僅支援不可變狀態。因此，原始答案中描述的可變狀態解決方案不再適用。

以上是為什麼在 React Hooks 中使用事件監聽器處理事件時狀態不正確？的詳細內容。更多資訊請關注PHP中文網其他相關文章！