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

问题描述

使用状态不起作用。我已经搜索了一个解决方案，我检查了许多表单，例如https://github.com/vercel/next.js/issues/7626，https://github.com/vercel/next.js/issues/17592， Hooks 错误：在 Windows 上使用 NextJS 或 ReactJS 的 Hook Call 无效，有些人似乎建议可以通过删除他们没有提及名称的节点模块来解决它，其他人说如果他们更改他们的 webpack 配置它可以工作，但我从未使用过 webpack并且找不到他们提到的，所以我被困住了。

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

导航.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

抽屉.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>
    </>
  )
}

标签： reactjsmaterial-uinext.jsuse-statedrawer

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

问题描述

解决方案

推荐阅读