时间戳

首页 > 解决方案 > React - 身份验证的无效挂钩调用问题

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

问题描述

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

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

  1. AuthContex.js
  2. AuthReducer.js
  3. 身份验证服务.js

当用户点击登录按钮时，在登录功能中调用 authentication-service.js。当用户登录时，我需要借助钩子将令牌注册到状态中。因为，我需要在应用程序中的任何时候刷新令牌，并且由于此刷新，令牌没有正确分发到所有组件。我想通过将令牌放在所有组件的顶部来解决这个问题。因此，如果令牌在应用程序中的任何时间被刷新，它将被正确地分发给子组件。

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

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

  1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
  2. 您可能违反了 Hooks 规则
  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以获得一个小演示。

标签： javascriptreactjsreact-native

解决方案

推荐阅读