React点击TopBar图标触发子菜单时报错setSubMenuOpen is not a function

错误原因&修复方案 #

你的代码存在2处props传递不匹配的问题：

1. App.js中调用Topbar组件时，没有将subMenuOpen、setSubMenuOpen两个状态和更新方法传递给Topbar，导致Topbar内部拿到的setSubMenuOpen为undefined，调用时触发类型错误。
2. App.js中调用SubMenu组件时，传递的更新方法名拼写错误，把驼峰命名的setSubMenuOpen写成了小写o的setSubMenuopen，大小写不匹配导致SubMenu内部无法拿到正确的更新方法。

修复后的App.js对应代码片段

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

  return (
    <div className="App">
      {/* 新增subMenu相关props传递给Topbar */}
      <Topbar 
        menuOpen={menuOpen} 
        setMenuOpen={setMenuOpen}
        subMenuOpen={subMenuOpen}
        setSubMenuOpen={setSubMenuOpen}
      />
      <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      {/* 修正props名的大小写错误 */}
      <SubMenu 
        subMenuOpen={subMenuOpen} 
        setSubMenuOpen={setSubMenuOpen}
      />
      <div className="sections">
        <Home />
        <AboutUs/>
        <Releases/>
        <Page1/>
        <Page2/>
      </div>
    </div>
  );
}

export default App;

额外提示：你贴的原App.js代码最后export default App;后面多了一个多余的闭合大括号，建议同步删除避免编译报错。修改完成后即可正常触发子菜单的展开收起逻辑。

内容的提问来源于stack exchange，提问作者Kyowan Kim