React组件报错求助：'state'与'handleClick'未定义

Hey there! Let's break down what's going on here and fix those errors step by step. The core issue is that you're mixing function component syntax with class component features—and when you tried switching to a class component, you missed a few key pieces to make it work properly.

Why You're Seeing These Errors #

Your current code is written as a function component (const Navbar = props => {}), but you're using class-only syntax:

• state = { ... } is how class components initialize state, not function components
• handleClick = e => {} is class component syntax for class methods
• this.setState and this.state only exist in class components, not function components

Solution 1: Convert to a Complete Class Component #

You mentioned trying to switch to a class component but it didn't work. Here's the fully fixed version with all necessary changes:

import React, { Component } from 'react'; // Import Component instead of useState
import { Layout, Menu, Drawer, Icon } from 'antd';
import { Mobile, Default } from '../Responsive';
import './index.less';

const { Header } = Layout;
const { SubMenu } = Menu;

class Navbar extends Component {
  // Initialize class component state
  state = {
    current: 'home',
    visible: false // Move drawer visibility into class state
  };

  // Class method for menu click handling
  handleClick = e => {
    console.log('click ', e);
    this.setState({ current: e.key });
  };

  // Method to update drawer visibility
  setVisible = (visible) => {
    this.setState({ visible });
  };

  render() {
    // Destructure state values to clean up code
    const { current, visible } = this.state;
    
    const menu = (
      <Menu 
        theme="lite" 
        mode="horizontal" 
        onClick={this.handleClick} 
        selectedKeys={[current]} 
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="mail">
          <Icon type="mail" /> Navigation One
        </Menu.Item>
        <Menu.Item key="app" disabled>
          <Icon type="appstore" /> Navigation Two
        </Menu.Item>
        <SubMenu title={
          <span className="submenu-title-wrapper">
            <Icon type="setting" /> Navigation Three - Submenu
          </span>
        }>
          <Menu.ItemGroup title="Item 1">
            <Menu.Item key="setting:1">Option 1</Menu.Item>
            <Menu.Item key="setting:2">Option 2</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup title="Item 2">
            <Menu.Item key="setting:3">Option 3</Menu.Item>
            <Menu.Item key="setting:4">Option 4</Menu.Item>
          </Menu.ItemGroup>
        </SubMenu>
        <Menu.Item key="alipay">
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
            Navigation Four - Link
          </a>
        </Menu.Item>
      </Menu>
    );

    return (
      <Header className="app-header">
        <Default>{menu}</Default>
        <Mobile>
          <Icon type="bars" size="large" className="nav-icon" onClick={() => this.setVisible(true)} />
          <Drawer 
            title="" 
            placement="left" 
            closable 
            onClose={() => this.setVisible(false)} 
            visible={visible} 
            className="nav-drawer"
          >
            {menu}
          </Drawer>
        </Mobile>
      </Header>
    );
  }
}

export default Navbar;

Key fixes here:

• Replaced useState import with Component (required for class components)
• Moved the drawer's visible state into the class's state object
• Added a setVisible method to update drawer visibility
• Removed redundant props in the Menu component (fixed duplicate mode prop)
• Used this.state and this.handleClick correctly in the JSX

Solution 2: Fix the Function Component (Modern React) #

If you prefer to stick with function components (the current standard in React), we'll convert the class-style code to use Hooks:

import React, { useState } from 'react';
import { Layout, Menu, Drawer, Icon } from 'antd';
import { Mobile, Default } from '../Responsive';
import './index.less';

const { Header } = Layout;
const { SubMenu } = Menu;

const Navbar = props => {
  // Use useState hooks for function component state
  const [current, setCurrent] = useState('home');
  const [visible, setVisible] = useState(false);

  // Define handleClick as a regular function (no this needed)
  const handleClick = e => {
    console.log('click ', e);
    setCurrent(e.key); // Use the state updater from useState
  };

  const menu = (
    <Menu 
      theme="lite" 
      mode="horizontal" 
      onClick={handleClick} // No this. required
      selectedKeys={[current]} // Use state value directly
      style={{ lineHeight: '64px' }}
    >
      <Menu.Item key="mail">
        <Icon type="mail" /> Navigation One
      </Menu.Item>
      <Menu.Item key="app" disabled>
        <Icon type="appstore" /> Navigation Two
      </Menu.Item>
      <SubMenu title={
        <span className="submenu-title-wrapper">
          <Icon type="setting" /> Navigation Three - Submenu
        </span>
      }>
        <Menu.ItemGroup title="Item 1">
          <Menu.Item key="setting:1">Option 1</Menu.Item>
          <Menu.Item key="setting:2">Option 2</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="Item 2">
          <Menu.Item key="setting:3">Option 3</Menu.Item>
          <Menu.Item key="setting:4">Option 4</Menu.Item>
        </Menu.ItemGroup>
      </SubMenu>
      <Menu.Item key="alipay">
        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
          Navigation Four - Link
        </a>
      </Menu.Item>
    </Menu>
  );

  return (
    <Header className="app-header">
      <Default>{menu}</Default>
      <Mobile>
        <Icon type="bars" size="large" className="nav-icon" onClick={() => setVisible(true)} />
        <Drawer 
          title="" 
          placement="left" 
          closable 
          onClose={() => setVisible(false)} 
          visible={visible} 
          className="nav-drawer"
        >
          {menu}
        </Drawer>
      </Mobile>
    </Header>
  );
};

export default Navbar;

Key fixes here:

• Split the class state into two separate useState hooks (one for menu selection, one for drawer visibility)
• Replaced this.setState with the state updater functions from useState
• Removed all this. references (function components don't use this)
• Fixed the duplicate mode prop in the Menu component

Either solution will resolve your no-undef errors. If you're new to React, I'd recommend starting with the function component version—it's more modern and flexible for most use cases.

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