如何使用或导入Drawer.js文件中的常量

Question

我正在使用Next.js。在Nav.js中，我有以下consts:

export default function NestedList() {
const [value,setValue]=React.useState();
const theme=useTheme();
const isMatch=useMediaQuery(theme.breakpoints.down('lg'));
const [on, seton] = useState(false);
const [photos, setPhotos] = useState([]);
const [bea, setBea] = useState([]);
const [home, setHome] = useState([]);
const [aaa, setaaa] = useState(0); 
const [bbb, setbbb] = useState(0); 
const [ccc, setccc] = useState(0);
//I did not show the return function.
}

在Drawerr.js中，我有这样的代码：

import {useState} from 'react'
import { styled } from '@mui/material/styles';
import {Drawer, IconButton, List, ListItemButton, ListItemIcon, ListItemText,Box} from "@mui/material";
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import Image from 'next/image';
import { height } from '@mui/system';
import Nav from './Nav';
const Drawerr = ({linkArray}) => {
const [open, setopen] = useState(false)
return (
<>
<Drawer  PaperProps={{sx:{backgroundColor:'#035445'}}} open={open} onClose={()=> setopen(false)}>
<List>
<Box component="img" src="/dlogo.svg" sx={{ mt:-1, height:125,width:250}}/>
{linkArray.map((link,index)=>(
<ListItemButton divider key={index} onClick={()=>setopen(false)}   >
<ListItemIcon >
<ListItemText  sx={{ color:"#00ffd0" }} onClick={()=>{
if(index==1 ){setaaa(aaa+30),setbbb(bbb==0),setccc(ccc==0)}
if(index==4 ){setaaa(aaa==0),setccc(ccc==0),setbbb(bbb+30)}
if(index==0 ){setaaa(aaa==0),setbbb(bbb==0),setccc(ccc+30)}

}}>
{link}
</ListItemText>
</ListItemIcon>
</ListItemButton>
))}
</List>
</Drawer>
<IconButton  onClick={()=>setopen(!open)} sx={{marginLeft:"auto" ,color:"#00a859"}}>

<MenuRoundedIcon/>
</IconButton>
</>
)
}
export default Drawerr

所以我不能在Drawerr.js中使用那些const，我得到了这个错误：

ReferenceError：未定义setaaa

我应该如何使用Drawer.js中的const？

Answer 1

第一件事

import Nav from './Nav';

这里Nav是一个函数，而不是一个对象，现在根据你的代码，我可以看到你正在尝试阻抗自定义挂钩？如果我是对的，你可以像这个一样在react中创建自定义钩子

export default function useNestedList() {
const [value,setValue]=React.useState();
const theme=useTheme();
const isMatch=useMediaQuery(theme.breakpoints.down('lg'));
const [on, seton] = useState(false);
const [photos, setPhotos] = useState([]);
const [bea, setBea] = useState([]);
const [home, setHome] = useState([]);
const [aaa, setaaa] = useState(0); 
const [bbb, setbbb] = useState(0); 
const [ccc, setccc] = useState(0);
//I did not show the return function.
return {
setaaa:setaaa,
setbbb:setbbb,
setccc:setccc,
aaa:aaa,
bbb:bbb,
ccc:ccc
}
}

然后你可以在drawer.js 中以这种方式使用这个钩子

import {useState} from 'react'
import { styled } from '@mui/material/styles';
import {Drawer, IconButton, List, ListItemButton, ListItemIcon,ListItemText,Box} from "@mui/material";
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import Image from 'next/image';
import { height } from '@mui/system';
import useNestedList from './Nav';
const Drawerr = ({linkArray}) => {
const [open, setopen] = useState(false)
const { setaaa,setbbb,setccc,aaa,bbb,ccc} =useNestedList()
return (
<>
<Drawer  PaperProps={{sx:{backgroundColor:'#035445'}}} open={open} onClose={()=> setopen(false)}>
<List>
<Box component="img" src="/dlogo.svg" sx={{ mt:-1, height:125,width:250}}/>
{linkArray.map((link,index)=>(
<ListItemButton divider key={index} onClick={()=>setopen(false)}   >
<ListItemIcon >
<ListItemText  sx={{ color:"#00ffd0" }} onClick={()=>{
if(index==1 ){setaaa(aaa+30),setbbb(bbb==0),setccc(ccc==0)}
if(index==4 ){setaaa(aaa==0),setccc(ccc==0),setbbb(bbb+30)}
if(index==0 ){setaaa(aaa==0),setbbb(bbb==0),setccc(ccc+30)}

}}>
{link}
</ListItemText>
</ListItemIcon>
</ListItemButton>
))}
</List>
</Drawer>
<IconButton  onClick={()=>setopen(!open)} sx={{marginLeft:"auto" ,color:"#00a859"}}>

<MenuRoundedIcon/>
</IconButton>
</>
)}
export default Drawerr

希望这会有所帮助！