MERN栈开发响应式导航栏 修改app.js事件处理出现不可见undefined报错

你遇到的所有undefined报错，核心是把类组件的语法硬套到了函数式组件的代码框架里，两种React组件的语法规则完全不兼容，逐点对应你代码里的问题：

• 基础语法错误：sideDrawerOpen: False里的大写False是Python语言的布尔值写法，JS环境下没有这个内置值，属于未定义变量，运行时直接触发ReferenceError。
• 误用类组件专属接口：函数式组件本身不存在this.state、this.setState这些属性和方法，你代码里所有绑定this的调用，在普通函数作用域下this本身就是undefined，一执行就会触发"Cannot read property 'state' of undefined"的典型报错。
• 渲染逻辑写法错误：你照搬了类组件的render()方法结构，但函数组件的返回值本身就是要渲染的页面内容，你写的render();是无意义的空函数调用，后面的代码块没有接入组件渲染流程，React根本识别不到。
• 结构冗余：函数组件里不需要嵌套独立的render代码块，所有渲染相关的判断逻辑直接写在组件作用域内即可。

import React, { useState } from "react";

import NavigationBar from "./Components/NavigationBar/NavigationBar.js";
import SideDrawer from "./Components/SideDrawer/SideDrawer.js";
import BackDrop from "./Components/BackDrop/BackDrop.js";

function App() {
  // 用React内置useState钩子实现状态管理，替代类组件的this.state
  const [sideDrawerOpen, setSideDrawerOpen] = useState(false);

  // 事件处理函数直接在组件内定义，不需要手动绑定this
  function drawerToggleClickHandler() {
    setSideDrawerOpen(prevState => !prevState);
  }

  // 直接在组件作用域内写渲染判断逻辑
  let sideDrawer = null;
  let backDrop = null;

  if (sideDrawerOpen) {
    sideDrawer = <SideDrawer />;
    backDrop = <BackDrop />;
  }

  return (
    <div style={{ height: "100%" }}>
      <NavigationBar drawerToggleClickHandler={drawerToggleClickHandler}/>
      {sideDrawer}
      {backDrop}
      <main style={{ marginTop: "64px" }}>
        <p>This is the page content</p>
      </main>
    </div>
  );
}

export default App;

你参考的教程是React早期版本的类组件实现方案，现在脚手架默认生成的是函数式组件模板，不用为了适配教程硬改回类组件写法，只要把原来类组件里的状态逻辑换成useState钩子实现，去掉所有无意义的this绑定和独立render方法，就能消除所有undefined报错。

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