Css 在return语句中呈现的钩子数少于预期错误

我试图构建一个简单的导航栏，但是当我在useEffect中定义了一个setResponsivness函数时 我得到的错误呈现的钩子比预期的少。这可能是由意外的提前返回语句引起的。我看了同样的答案，但蒂尔无法解决

这是我的密码

import React,{useEffect,useState} from 'react'
import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton} from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'

const usestyles = makeStyles({
    root:{
       
        display:'flex',
        justifyContent:'space-between' ,
        maxWidth:'700px'
    },
   menubtn:{
    fontFamily: "Work Sans, sans-serif",
    fontWeight: 500,
    paddingRight:'79px',
    color: "white",
    textAlign: "left",
    },
    menuicon:{
      edge: "start",color: "inherit",paddingLeft:'0'
    }
})

const menudata = [
    {
      label: "home",
      href: "/",
    },
    {
      label: "About",
      href: "/about",
    },
    {
      label: "Skill",
      href: "/skills",
    },
    {
      label: "Projects",
      href: "/projects",
    },
    {
      label: "Contact",
      href: "/contact",
    },
  ];

//yet to target link for the smooth scroll
function getmenubuttons(){
    const {menubtn} = usestyles();
    return menudata.map(({label,href})=>{
        return <Button className={menubtn}>{label}</Button>
    })
} 
//to display navbar on desktop screen
function displaydesktop(){
    const { root } = usestyles() //destructuring our custom defined css classes
    return <Toolbar ><Container maxWidth={false} className={root}>{getmenubuttons()}</Container>   </Toolbar>
}
//to display navbar on mobile screen
function displaymobile(){
  const {menuicon} =usestyles() ;
  return <Toolbar><IconButton className={menuicon}><MenuIcon />  </IconButton></Toolbar>
}
function Navbar() {
     const [state, setState] = useState({mobileview:false});
     const {mobileview} = state;

     useEffect(() => {
      const setResponsiveness = () => {
        return window.innerWidth < 900
          ? setState((prevState) => ({ ...prevState, mobileview: true }))
          : setState((prevState) => ({ ...prevState, mobileview: false }));
      };
  
      setResponsiveness();
  
      window.addEventListener("resize", () => setResponsiveness());
    }, []);
    return (
        <div>
          <AppBar> {mobileview?displaymobile():displaydesktop()} </AppBar>        
        </div>
    )
}

export default Navbar;

import React，{useffect，useState}来自“React”
从“@material ui/core”导入{AppBar、工具栏、容器、makeStyles、按钮、图标按钮}
从“@material ui/icons/Menu”导入菜单图标
const usestyles=makeStyles({
根目录：{
显示：'flex'，
辩护内容：'space-between'，
最大宽度：'700px'
},
菜单：{
fontFamily：“无衬线、无衬线工作”，
重量：500，
paddingRight:'79px'，
颜色：“白色”，
textAlign：“左”，
},
menuicon：{
边缘：“开始”，颜色：“继承”，填充左侧：“0”
}
})
常数menudata=[
{
标签：“主页”，
href:“/”，
},
{
标签：“关于”，
href:“/关于”，
},
{
标签：“技能”，
href:“/skills”，
},
{
标签：“项目”，
href:“/projects”，
},
{
标签：“联系人”，
href:“/contact”，
},
];
//但目标链接的平滑滚动
函数getmenubuttons（）{
const{menubtn}=usestyles（）；
返回menudata.map（（{label，href}）=>{
返回{label}
})
} 
//在桌面屏幕上显示导航栏的步骤
函数displaydesktop（）{
const{root}=usestyles（）//解构自定义的css类
返回{getmenubuttons（）}
}
//在移动屏幕上显示导航栏
函数displaymobile（）{
const{menuicon}=usestyles（）；
返回
}
函数Navbar（）{
const[state，setState]=useState（{mobileview:false}）；
const{mobileview}=状态；
useffect（（）=>{
常量setresponsibility=（）=>{
返回窗口。内部宽度<900
？设置状态（（prevState）=>（{…prevState，mobileview:true}））
：setState（（prevState）=>（{…prevState，mobileview:false}））；
};
setresponsibility（）；
addEventListener（“resize”，（）=>setResponsibility（））；
}, []);
返回(
{mobileview？displaymobile（）：displaydesktop（）}
)
}
导出默认导航栏；

您的问题似乎就在这里

{mobileview?displaymobile():displaydesktop()} 

例如，

displaymobile

函数内部使用了右钩子（

usestyles

）？这意味着您在条件（

mobileview

being-condition）内呈现钩子，这是钩子规则所不允许的

您可以这样修复它：

    <div>
      <AppBar> {mobileview ? <Displaymobile /> : <Displaydesktop />} </AppBar>
    </div>

{mobileview？：}

还可以使用大写字母更改组件的定义，因为react是如何引用组件的。e、 g

function Displaydesktop() {
  const { root } = usestyles(); //destructuring our custom defined css classes
  return (
    <Toolbar>
      <Container maxWidth={false} className={root}>
        {getmenubuttons()}
      </Container>{" "}
    </Toolbar>
  );
}

函数显示桌面（）{
const{root}=usestyles（）；//解构自定义的css类
返回(
{getmenubuttons（）}
{" "}
);
}

---

现在我们将它们作为组件使用。当您在渲染中使用小写字母并将其作为函数调用时，react可能会将其解释为自定义挂钩，因此会出现警告。

您的问题似乎就在这里

{mobileview?displaymobile():displaydesktop()} 

例如，

displaymobile

函数内部使用了右钩子（

usestyles

）？这意味着您在条件（

mobileview

being-condition）内呈现钩子，这是钩子规则所不允许的

您可以这样修复它：

    <div>
      <AppBar> {mobileview ? <Displaymobile /> : <Displaydesktop />} </AppBar>
    </div>

{mobileview？：}

还可以使用大写字母更改组件的定义，因为react是如何引用组件的。e、 g

function Displaydesktop() {
  const { root } = usestyles(); //destructuring our custom defined css classes
  return (
    <Toolbar>
      <Container maxWidth={false} className={root}>
        {getmenubuttons()}
      </Container>{" "}
    </Toolbar>
  );
}

函数显示桌面（）{
const{root}=usestyles（）；//解构自定义的css类
返回(
{getmenubuttons（）}
{" "}
);
}

现在我们将它们作为组件使用。当您在渲染中使用小写字母并将其作为函数调用时，react可能会将其解释为自定义挂钩，因此会出现警告