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

Question

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

我的问题是，当我在登录组件中执行 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);

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

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