useState 在下一个带有材质 ui 抽屉的 js 中不起作用

问题描述

useState 不起作用。我搜索了一个解决方案，我检查了许多表格，例如 https://github.com/vercel/next.js/issues/7626 ， https://github.com/vercel/next.js/issues/17592 ， Hooks error: Invalid Hook Call using NextJS or ReactJS on Windows ，有些人似乎建议可以通过删除一个他们没有提到名称的节点模块来解决它，其他人说如果他们改变他们的 webpack 配置就可以解决，但我从未使用过 webpack 并且不能发现他们提到了所以我被卡住了。

我正在实现 Material ui 的抽屉，我已经创建了一个抽屉组件并导入了它。

Nav.jsx：

import React,{ useState } from 'React'
import SignedOutLinks from "./Links/SignedOutLinks"
import { AppBar,Toolbar } from "@material-ui/core"
import MenuBtn from "./Links/MenuBtn"
import logo from "./Links/logo"
import CategoryBtn from "./Links/CategoryBtn"
import ShoppingCartBtn from "./Links/ShoppingCartBtn"
import LanguageBtn from "./Links/LanguageBtn"
import DarkModeBtn from "./Links/DarkModeBtn"
import NotificationBtn from "./Links/NotificationBtn"
import SignedIn from "./Links/SignedIn"
import Grid from '@material-ui/core/Grid';
import Search from "./Search/Search"
import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Drawer from './Drawer/Drawer'

const signedIn = true

const Nav = () => {
  const [isOpened,setIsOpened] = useState(false)
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"))

  const handleDrawerToggle = () => {
    setIsOpened(!isOpened)
  }

  return (
    <AppBar color="transparent" elevation={0} >
      <Toolbar>
        {
           !isMobile?
            <Grid
            container
            direction="row"
            justify="space-between"
            alignItems="center"
            spacing={10}
            >
              <Grid item container spacing={5} xs={4} justify="flex-start" wrap="Nowrap">
                <Grid item>
                  <logo/>
                </Grid>
                <Grid item>
                  <CategoryBtn />
                </Grid>
              </Grid>
              <Grid item xs={4}>
                <Search />
              </Grid>
              <Grid item container xs={4} justify="flex-end" wrap="Nowrap">
                  <ShoppingCartBtn />
                  <LanguageBtn />
                  <DarkModeBtn />
                  <NotificationBtn />
                  {signedIn? <SignedIn /> : <SignedOutLinks />}
              </Grid>
            </Grid>
          :
          <div>
            <Drawer isOpened={isOpened} />
            <Grid
              container
              direction="row"
              justify="space-around"
              spacing={10}
            >
              <Grid item container xs={4} justify="flex-start">
                <MenuBtn handleClick={handleDrawerToggle} />
              </Grid>
              <Grid item Container xs={4} justify="center" style={{textAlign: "center"}}>
                <Grid item>
                  <logo />
                </Grid>
              </Grid>
              <Grid item container xs={4} justify="flex-end">
                <ShoppingCartBtn />
              </Grid>
            </Grid>
          </div>
        }
        
      </Toolbar>
    </AppBar>
  )
}

export default Nav

Drawer.jsx：

import { Drawer as MUIDrawer} from '@material-ui/core'
import { List,ListItem,ListItemText,ListItemIcon } from '@material-ui/core'
import NotificationsIcon from '@material-ui/icons/Notifications';
import TranslateIcon from '@material-ui/icons/Translate';
import Brightness4Icon from '@material-ui/icons/Brightness4';
import LocalShippingIcon from '@material-ui/icons/LocalShipping';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import BusinessIcon from '@material-ui/icons/Business';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import ChatBubbleOutlineIcon from '@material-ui/icons/ChatBubbleOutline';
import CategoryIcon from '@material-ui/icons/Category';

function Drawer({isOpened}) {
    const items = [
        {
            text: user.userName,icon: <AccountCircleIcon />
        },{
            text: "Categories",icon: <CategoryIcon />
        },{
            text: "Language",icon: <TranslateIcon />
        },{
            text: "Mode",icon: <Brightness4Icon />
        },{
            text: "Notifications",icon: <NotificationsIcon />
        },{
            text: "Orders",icon: <LocalShippingIcon />
        },{
            text: "Are You a Seller?",icon: <BusinessIcon />
        },{
            text: "Messages",icon: <ChatBubbleOutlineIcon />
        },{
            text: "logout",icon: <ExitToAppIcon />
        }
    ]

    return (
        <div>
            <MUIDrawer open={isOpened}>
                <List>
                    {
                        items.map(item => {
                        return (
                            <ListItem button key={item.text} >
                                {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
                                <ListItemText primary={item.text} />
                            </ListItem>
                        )
                        })
                    }
                </List>
            </MUIDrawer>
        </div>
    )
}

export default Drawer

请注意，在我编写 Drawer 之前它一直工作正常，而且 useState 是在一开始就导入的，所以我没有忘记导入它

编辑：

next.js 中的文件夹结构

index.js：

import Head from 'next/head'
import styles from '../styles/Home.module.css'

import Nav from '../Components/Navbar/Nav'

export default function Home() {  
  return (
    <>
    <Head>
    <Meta name="description" content="Everything for everyone. TRNC E-commerce website focused on a huge variety of categories from fashion to electronics. Order Now and get your product delivered." />
    </Head>
    <div className={styles.container}>
      <Nav />
    </div>
    </>
  )
}

解决方法

它终于工作了，但是我找不到问题。我通过创建一个名为 Nav2 的新组件解决了这个问题，我从原始 Nav 组件复制了相同的代码，瞧它工作了，我删除了旧的 Nav 组件并将 Nav2 重命名为 Nav，它继续工作。

注意：我发现我忘记在抽屉中导入 useContext 因为用户是从 _app.js 发送的解构对象所以我添加了

const { user } = useContext(UserContext)

到组件函数的开头