如何在自定义钩子中的回调中保留更新的react上下文值

Question

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

我的问题是，当我在我的登录组件中执行setUser时，更新的用户数据不会反映在useAnalytics钩子中，它总是在每个事件中发送用户数据

这里有一个沙箱：https://codesandbox.io/s/romantic-perlman-wzxti?file=/src/Login.js你可以打开控制台，点击发送后看到结果

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

谢谢!

Answer 1

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

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

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

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

添加一个中间件来拦截所有的reducer更改，并在没有钩子的情况下将这些更改推送到分析。这将保证您通过检查action.type并从action.payload发送新数据来获得需要跟踪的所有更改。