错误消息：未知错误：无效的挂钩调用。钩子只能在功能组件的主体内部调用

Question

当我尝试运行我的应用程序时，我会得到一个空白页，而什么也没有渲染。

无效的挂钩呼叫。钩子只能在功能组件的主体内部调用。由于以下原因之一，这可能发生：

1. 您可能有不匹配的反应版本和渲染器（例如React Dom）
2. 您可能正在打破钩子的规则
3. 您可能在同一应用中拥有多个react的副本 请参阅 https://reactjs.org/link/link/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

您的组件没有无效的挂钩调用。您的代码还可以（除了第27行上的不相关的“关闭”。您的意思是MUI中的“闭合性”？以及菜单上的无关错字“ Align-iems”中的无关类iems。

检查其他组件，因为您粘贴的代码还可以。您在哪里打电话给无效的钩子。
对于此错误，只有3个原因您可能会看到它：

1. 使用React-Dom的版本，该版本不支持钩子
2. 破坏钩规则（例如，在类组件中将其调用外部功能组件，或者不调用它位于身体的最高层）
3. 具有多个反应副本