反应：无效的钩子调用。Hooks 只能在函数组件内部调用

Question

我花了 2 天时间试图了解错误在哪里，知道吗？

应用程序.js

import React, { useState, useEffect} from 'react';
import Menu from './components/Menu';


function App() {  

    return (
        <Menu></Menu>    
    );
}

export default App;

菜单.js

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


function Menu() {
    return (
        <button onClick={() => Logout()}>button</button>
    );
}

export default Menu;

登出.js

import React, { useContext, useState } from 'react';
export function Logout() {

    const [user, setUser] = useState();
    const [token, setToken] = useState();

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

export default Logout;

我在函数 (Logout()) 之上使用钩子，所以我不知道会发生什么。也许是因为我嵌套了组件？因为如果我将代码从 logout.js 移动到 menu.js 它可以工作但我试图将该功能移动到其他文件以便我可以在更多组件中使用它

错误是：无效的钩子调用。钩子只能在函数组件的主体内部调用。

  18 | 
  19 | 
> 20 | export function Logout() {
  21 | 
  22 |  const [user, setUser] = useState();
  23 |  const [token, setToken] = useState();

Answer 1

function Menu() {
    const [user, setUser] = useState('');
    const [token, setToken] = useState('');

    const logout = () => {
      localStorage.removeItem("token");
      localStorage.removeItem("user");
      setToken('');
      setUser('');
    }

    return (
        <button onClick={() => logout()}>button</button>
    );
}