javascript - react 。尝试从 onClick 事件调用自定义 Hook

Question

我正在尝试制作一个按钮来注销用户并将逻辑移动到自定义 Hook useLogout.js。

菜单.js

import useLogout from './useLogout';
import UserContext from './UserContext';
import TokenContext from './TokenContext';

function Menu() {
    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

/*  some code....*/
 let button;

    if (token && token.access_token && user) {
        button = <Button onClick={useLogout}>Logout</Button>;
    } else {
        button = <Button>Login</Button>;
    }

/* some code.... */
    return(
      <Nav.Link>
          {button}
      </Nav.Link>
    )
}

useLogout.js

import React, { useContext, useState} from 'react';
import UserContext from './UserContext';
import TokenContext from './TokenContext';

export default function useLogout() {

    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

    localStorage.removeItem("token");
    localStorage.removeItem("user");
    setToken();
    setUser();
};

当我运行它并单击按钮时，我收到此错误:无效的 Hook 调用。钩子(Hook)只能在函数组件体内调用 错误:导出默认函数 useLogout() { const [user, setUser] = useContext(UserContext);

所以我认为我对函数 useLogout 的调用错误，所以我修改了调用 onClick={useLogout()} 而不是 onClick={useLogout} 的代码 所以该行看起来像这样:

button = <Button onClick={useLogout()}>Logout</Button>;

但随后我收到此错误:React Hook“useLogout”被有条件地调用。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用

即使我尝试过:

button = <Button onClick={() => useLogout}>Logout</Button>;

如何修改我的代码，以便当我单击按钮时执行 useLogout.js 中的 useLogout 函数？

Answer 1

你想要的可能是这样的:

export default function useLogout() {

    const [user, setUser] = useContext(UserContext);
    const [token, setToken] = useContext(TokenContext);

    return () => {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      setToken();
      setUser();
    }
};

/

const logoutCb = useLogout();

button = <Button onClick={logoutCb}>Logout</Button>;