[英]React hook Error: Invalid hook call. Hooks can only be called inside of the body of a function component
[英]React: Invalid hook call. Hooks can only be called inside of the body of a function component
我花了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;
注销.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();
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>
);
}
像这样调用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.