如何在自定义钩子中的回调内保持更新的React上下文值

Question

我的应用包裹了一个userContext，我有一个用于发送分析事件的自定义钩子useAnalytics，还有一个Login组件，它执行登录并更改上下文中的用户值并发送事件。

我的问题是，当我在Login组件中执行setUser时，更新的用户数据未反映在useAnalytics挂钩中，该挂钩始终在每次事件中发送用户数据

此处是一个沙箱：https://codesandbox.io/s/romantic-perlman-wzxti?file=/src/Login.js 单击SEND后，您可以打开控制台并查看结果

我知道这可能是反模式，但是最好知道为什么我会出现这种行为

谢谢！

Answer 1

问题是所有设置状态都是异步的，而事件的发送是同步的。因此，您调度更改，发送分析，并在超时后更新状态。 有两种主要方法可以解决此问题。

1. 设置超时以等待响应以更新状态并在状态更新后推送分析：

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

1. 使用中间件发送分析：

添加一个中间件以拦截所有化简器更改，并将其推送到分析中，而无需挂钩本身。这将确保您通过检查action.type并从action.payload发送新数据来获取需要跟踪的所有更改。