React 事件監聽器是否會在功能元件中顯示意外的狀態變化？

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

在此查詢中，我們在使用 React Hooks 時遇到問題。使用事件偵聽器處理按鈕點選時，控制台日誌顯示不正確的狀態。

問題描述

在提供的CodeSandbox 中，遵循以下步驟：

1. 點擊「新增卡片」按鈕兩次以建立兩張卡。
2. 對於第一張卡，按一下「Button1」並在控制台中驗證它是否正確記錄了兩張卡。
3. 對於第一張卡，按一下由事件偵聽器控制的「Button2」。請注意，控制台現在僅顯示一張卡片。

此行為是意外的，因為第一張卡片的「Button2」也應該顯示兩張卡片的存在。

;問題原因

此問題源自於 CardsProvider 和 Card 元件中不同的事件處理程序處理。

• CardsProvider: 事件處理程序是每次組件渲染時都會重新創建，定義時引用陳舊狀態。
• Card: 事件處理程序在元件安裝時註冊，並在作為 props 傳遞時接收新狀態。然而，一個事件處理程序 (handleCardClick) 僅註冊一次，並且永久引用陳舊狀態。

解

解決此問題需要仔細考慮使用 useState 鉤子的功能元件中的事件處理方法。這裡有幾個選項：

1。可變狀態：

使用 useRef 而不是 useState 來引入保存當前狀態的可變物件。雖然這種方法允許直接狀態突變，但它違背了 React 開發的推薦實踐。

2.狀態更新器函數：

每當註冊事件偵聽器時，都會傳遞一個狀態更新器函數，該函數從封閉範圍接收新鮮狀態而不是陳舊狀態。這可確保事件偵聽器始終能夠存取最新狀態。

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

每次狀態改變時重新註冊事件監聽器。這可以確保回呼始終收到最新的狀態資訊。

4.內建事件處理：

對於元件範圍內的事件偵聽器，透過直接在JSX 中定義事件偵聽器來利用React 的內建事件處理。這消除了對 useEffect 的需要，並確保事件監聽器始終接收當前狀態。

以上是React 事件監聽器是否會在功能元件中顯示意外的狀態變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！