React-身份验证的无效挂钩调用问题

Question

我对我的React Spa应用程序使用令牌身份验证。我正在尝试使用React挂钩添加令牌。

对于这个小例子，我有三个文件。

1. AuthContex.js
2. AuthReducer.js
3. authentication-service.js

当用户单击登录按钮时，在登录功能中响应调用authentication-service.js。 当用户登录后，我需要在挂钩的帮助下将令牌注册到该状态。因为，我需要在应用程序中的任何时候刷新令牌，并且作为刷新的结果，令牌没有正确分发到所有组件。我想通过将令牌放在所有组件之上来解决此问题。因此，如果令牌在应用程序中的任何时间被刷新，它将被正确地分配给子组件。

但是反应出了错误 --- >>

  

×未处理的拒绝（错误）：无效的挂钩调用。钩子只能是   在功能组件的主体内部调用。这可能发生   出于以下原因之一：

     

  
1. 您可能使用了不匹配的React和渲染器版本（例如   作为React DOM）
  
2. 您可能正在违反挂钩规则
  
3. 您可能在同一应用中拥有多个React副本
  

function login(username, password) {
    const { authDispatch } = useContext(AuthContext);
    return axios.post('/api/Authentication/SignIn', {
        email: username,
        password: password
    })
        .then((res) => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes

            localStorage.setItem('auth-jwt', JSON.stringify(res.data));
            currentUserSubject.next(res);

            authDispatch({ type: LOGIN, payload: res.data });
            return res;

        }).catch(handleResponse);

}

请参阅我的CodeSandbox进行小型演示。