如何在自定義鈎子的回調中保持更新的反應上下文值

Question

我有一個 userContext 包裝了我的應用程序，我有一個自定義鈎子 useAnalytics 用於發送分析事件，我有一個登錄組件，它執行登錄並更改上下文中的用戶值並發送事件。

我的問題是，當我在登錄組件中執行 setUser 時，更新用戶數據未反映在 useAnalytics 掛鈎中，它始終在每個事件中發送用戶數據

這里有一個沙箱： https : //codesandbox.io/s/romantic-perlman-wzxti? file =/ src/ Login.js點擊SEND就可以打開控制台查看結果

我知道這可能是一種反模式，但最好知道我為什么會出現這種行為

謝謝！

Answer 1

問題是所有設置的狀態都是異步的，而事件的發送是同步的。 因此，您發送更改，發送分析，並在超時后更新狀態。 有兩種主要方法可以解決此問題。

1. 設置超時以等待 react 更新狀態並在狀態更新后推送分析：

setUser({ type: "login", data: { user: "pippo" } });
setTimeout(sendEvent, 16);

2. 使用中間件發送分析：

添加一個中間件來攔截所有 reducer 更改並將它們推送到分析中，而無需掛鈎本身。 這將保證您通過檢查action.type並從 action.payload 發送新數據來獲得需要跟蹤的所有更改。