TypeError：setSubMenuOpen 不是 onClick 函数

Question

当我单击我的 TopBar 组件中的图标时，我试图让子菜单下拉，但当我尝试这样做时，我得到了下面的 TypeError。我已经成功地复制了从侧面出现的这种相同类型的菜单功能，但我似乎无法让它工作。

TypeError Image

App.js

import "./App.scss"
import Topbar from "./components/Topbar/Topbar"
import AboutUs from "./components/AboutUs/AboutUs"
import Home from "./components/Home/Home"
import Page1 from "./components/Page1/Page1"
import Page2 from "./components/Page2/Page2"
import Releases from "./components/Releases/Releases"
import {useState} from "react"
import Menu from "./components/Topbar/Menu/Menu"
import SubMenu from "./components/Topbar/SubMenu/SubMenu"


function App() {
  const [subMenuOpen,setSubMenuOpen] = useState(false);
  const [menuOpen,setMenuOpen] = useState(false);

  return (
    <div className="App">
      <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <SubMenu subMenuOpen={subMenuOpen} setSubMenuopen={setSubMenuOpen}/>
      <div className="sections">
        <Home />
        <AboutUs/>
        <Releases/>
        <Page1/>
        <Page2/>
      </div>
    </div>
  );
}

export default App;

}

Topbar.jsx

import "./topbar.scss"
import hushlogo from "../../pictures/hushCrewLogo.JPG"


export default function Topbar({subMenuOpen, setSubMenuOpen, menuOpen, setMenuOpen}) {
    return (
        <div className={"topbar " + (menuOpen && "active")}>
            <div className="wrapper">
                <div className="left">
                    <a href="#home" className="logo">
                    Hush Crew
                    </a>
                    <a href="#home" className="logo2">
                    <img src={hushlogo} alt="hushlogo" height="50" width="50" border-radius="50"/>
                    </a>
                </div>
                <div className="right">
                    <div className="container-right" onClick={()=>setSubMenuOpen(!subMenuOpen)}>
                        <ion-icon name="logo-instagram" size="large" className="instagram-logo">
                        </ion-icon>
                    </div>
                    <a href="https://twitter.com/hushcrew_" className="container-right">
                        <ion-icon name="logo-twitter" size="large"></ion-icon>
                    </a>
                    <a href="https://www.facebook.com/HushCrewBoston" className="container-right">
                        <ion-icon name="logo-facebook" size="large"></ion-icon>
                    </a>
                    <a href="https://www.tiktok.com/@hushcrew?" className="container-right">
                        <ion-icon name="logo-tiktok" size="large"></ion-icon>
                    </a>
                    <a href="https://www.youtube.com/c/HUSHCREW" className="container-right">
                        <ion-icon name="logo-youtube" size="large"></ion-icon>
                    </a>
                    <div className="hamburger" onClick={()=>setMenuOpen(!menuOpen)}>
                        <span className="line1"></span>
                        <span className="line2"></span>
                        <span className="line3"></span>
                    </div>
                </div>
            </div>     
        </div>
    )
}

SubMenu.jsx

import "./submenu.scss"

export default function SubMenu({subMenuOpen, setSubMenuOpen}) {
    return (
        <div className={"submenu " + (subMenuOpen && "active")}>
            <ul>
                <li onClick={()=>setSubMenuOpen(false)}>
                    <a href="https://www.instagram.com/hushcrew.bos/">Hush Crew Boston</a>
                </li>
                <li onClick={()=>setSubMenuOpen(false)}>
                    <a href="https://www.instagram.com/hushcrew.la/">Hush Crew LA</a>
                </li>
            </ul>
        </div>
    )
}

Answer 1

Nvm，我想通了...非常愚蠢的错误，我没有在 App.js 文件的 Topbar 组件中包含 subMenuOpen={subMenuOpen} setSubMenuOpen={setSubMenuOpen} 的 useState 参数。