Question

我花了2天的时间来弄清楚错误在哪里，有什么主意吗？

App.js

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


function App() {  

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

export default App;

Menu.js

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


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

export default Menu;

Logout.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

像这样调用onClick回调：

<button onClick={() => Logout()}>button</button>

等价于：

const anynomousFunc = () => {
  // Logout()
  const [user, setUser] = useState();
  const [token, setToken] = useState();

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

但是请注意，anynomousFunc 不是反应组件，它会导致：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

// Examples of equivalent (but not valid) calls with react components
<div attribute={<Logout/>}>Example</div>
<div attribute={Logout()}>Example</div>

要解决此问题，根据您的应用程序逻辑，create a custom hook会返回function并使用它。

反应：无效的挂钩调用。挂钩只能在功能组件的主体内部调用

2 个答案: