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

【问题标题】：Rendered fewer hooks than expected error in the return statement在 return 语句中呈现的钩子少于预期的错误
【发布时间】：2021-05-09 14:15:14
【问题描述】：

我正在尝试构建一个简单的导航栏，但是当我在我的 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;

【问题讨论】：

标签： css reactjs react-hooks use-effect

【解决方案1】：

你的问题似乎在这里

{mobileview?displaymobile():displaydesktop()}

例如displaymobile 函数内部使用钩子对吗（usestyles）？那么这意味着你在条件内渲染钩子（mobileview 是条件），这是钩子规则所不允许的。

你可以这样修复它：

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

还使用大写字母更改组件的定义，因为这就是 react 引用组件的方式。例如

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

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

【讨论】：