為什麼 React Hook 與事件監聽器表現出不一致的狀態行為？

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

概述

本文深入研究了使用React Hooks 時遇到的問題，特別是關於不一致的行為由自訂元件中的事件偵聽器觸發時的狀態控制台日誌記錄。

問題陳述

考慮給定的 CodeSandbox：https://codesandbox.io/s/lrxw1wr97m。請依照以下步驟操作：

1. 點擊「新增卡片」按鈕兩次以建立兩張卡片。
2. 在第一張卡片中，按一下「按鈕 1」以顯示正確的卡片數量（2 ）在控制台中。
3. 在第一張卡片中，按一下「Button2」（由事件偵聽器處理），觀察控制台中只有一張卡片的錯誤顯示。

嘗試從附加到「Button2」的事件偵聽器中顯示更新後的狀態時會出現此問題。

根本原因

狀態顯示的差異源自於事件處理程序的實作方式不同在 CardsProvider 和 Card 元件中。

• CardsProvider: 事件處理程序在功能組件的範圍內定義，在定義時建立引用目前狀態的新函數。
• 卡片： 事件處理程序以 props 接收，並在組件安裝時註冊一次。但是，這些處理程序所引用的陳舊狀態可能不代表目前狀態。

解

幾種方法可以解決此問題：

可變狀態:

可變狀態值（例如useRef 提供的值）可用於保留最新的狀態變更。但是，不建議使用此方法，因為 useState 用於管理不可變狀態。

狀態更新器函數：

使用狀態更新器函數可以將最新狀態傳遞給回調，確保顯示的狀態始終為目前狀態。

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

或者，可以在每次狀態更新時重新註冊事件監聽器保證對當前狀態的存取。

內建事件處理：

如果可能，利用 React 的原生 DOM 事件處理機制可以消除手動事件監聽器管理的需要。

摘要

狀態顯示與事件偵聽器處理的不一致可歸因於受影響組件內事件處理程序的不同處理方式。透過採用適當的解決方案，開發人員可以緩解此問題並保持正確的狀態行為。

以上是為什麼 React Hook 與事件監聽器表現出不一致的狀態行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！