错误消息:Uncaught Error: Invalid hook call.钩子只能在函数组件的内部调用

Question

当我尝试运行我的应用程序时，我得到一个空白页，没有任何东西被渲染。

无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call。

import React,{ useState} from 'react';
import styled from 'styled-components'
import MenuIcon from '@material-ui/icons/Menu';
import CloseIcon  from '@material-ui/icons/Close';
function Header() {
const [burgerState,setBurgerState] = useState(false);
return (
<Container>
<a href='#'>
<img src='/images/logo.svg' alt=''/>
</a>
<MenuGroup>
<div>Model S</div>
<div>Model X</div>
<div>Model Y</div>
</MenuGroup>
<RightMenu>
<a href='#'>Shop</a>
<a href='#'>Tesla Account</a>
<MenuIconContainer onClick={ () => setBurgerState(true)} >
<MenuIcon/>
</MenuIconContainer>
</RightMenu>
<BurgerNav status={burgerState}>
<CloseContainer>
<Close onClick={ () => setBurgerState(false)} />
</CloseContainer>
<li><a href='#'>Model S</a></li>
<li><a href='#'>Model Y</a></li>
<li><a href='#'>Existing inventory</a></li>
<li><a href='#'>Used inventory</a></li>
<li><a href='#'>Trade-in</a></li>
<li><a href='#'>Cybertruck</a></li>
<li><a href='#'>Roadster</a></li>
<li><a href='#'>Semi</a></li>
<li><a href='#'>Charging</a></li>
</BurgerNav >
</Container>
)
}
export default Header;
const Container = styled.div`
display: flex;
min-height: 60px;
align-items: center;
justify-content: space-between;
padding: 0 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
`;

const MenuGroup = styled.div`
display: flex;
text-transform: uppercase;
div {
font-weight: 600;
padding: 0 10px;
cursor: pointer;
}
@media(max-width: 760px) {
display: none;
}
`;
const RightMenu = styled.div`
display: flex;
a {
font-weight: 600;
text-transform: uppercase;
padding-right: 20px;
}
`;
const MenuIconContainer = styled.div`
display:flex;
align-iems:center;
cursor:pointer;
`;
const CloseContainer = styled.div`
display: flex;
justify-content: flex-end;
`
const Close = styled(CloseIcon)`
`;
const BurgerNav = styled.div`
position: fixed;
width: 300px;
background: white;
top: 0;
right: 0;
bottom: 0;
padding: 20px;
list-style: none;
transform: ${props => props.status ? 'translateX(0)' : 'translateX(100%)'};
transition: transform 0.2s ease-in;
li {
padding: 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, .2);
a {
font-weight: 600;
}
}
`

Answer 1

你的组件没有无效的钩子调用。你的代码没问题(除了不相关的未定义的"Close"在第27行。你是说"关闭图标"吗?从梅?在MenuIconContainer中还有一个不相关的错别字"align- items

检查其他组件，因为您粘贴在这里的代码是可以的。你在哪里调用无效的钩子。对于这个错误，您可能看到它只有3个原因:

1. 使用不支持Hooks的react-dom版本
2. 违反了钩子规则(比如在功能组件之外调用它，比如在类组件中，或者不在主体的顶层调用它)
3. 拥有多个React副本