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

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 发送新数据来获得需要跟踪的所有更改。