React类组件导航栏明暗模式切换报错：无法读取undefined的state属性

错误根源 #

将toggle方法直接传给onClick回调时，类方法的this上下文会丢失，调用时this变为undefined，因此无法读取this.state。

三种可行修复方案 #

方案1：在构造函数中绑定this #

手动将toggle方法的this绑定到组件实例，确保调用时上下文正确：

constructor() {
    super();
    this.state = {
        mode: "light"
    };
    // 绑定this到组件实例
    this.toggle = this.toggle.bind(this);
}

方案2：用箭头函数定义toggle方法 #

箭头函数会自动继承外层的this，无需额外绑定，同时可以简化状态更新逻辑：

// 移除不必要的async（切换逻辑无异步操作）
toggle = () => {
    this.setState(prevState => ({
        mode: prevState.mode === "light" ? "dark" : "light"
    }));
}

方案3：在onClick中用箭头函数包裹调用 #

直接在事件回调里用箭头函数确保this指向组件实例：

<input 
    className="form-check-input" 
    type="checkbox" 
    role="switch" 
    id="flexSwitchCheckDefault" 
    onClick={() => this.toggle()} 
/>

完整修正代码（以方案2为例） #

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

export class Navbar extends Component {
    constructor() {
        super();
        this.state = {
            mode: "light"
        };
    }
   
    toggle = () => {
        this.setState(prevState => ({
            mode: prevState.mode === "light" ? "dark" : "light"
        }));
    } 
    
    render() {
        return (
            <div>
                <nav className={`navbar navbar-expand-lg navbar-${this.state.mode} bg-${this.state.mode}`}>
                    <div className="container-fluid">
                        <Link className="navbar-brand" to="/">EasyNews</Link>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                                <li className="nav-item">
                                    <Link className="nav-link" aria-current="page" to="/">Home</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/business">Business</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/entertainment">Entertainment</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/health">Health</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/science">Science</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/sports">Sports</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/technology">Technology</Link>
                                </li>
                                <li className="nav-item">
                                    <Link className="nav-link" to="/about">About</Link>
                                </li>
                            </ul>
                        </div>
                        <div className="form-check form-switch">
                            <input 
                                className="form-check-input" 
                                type="checkbox" 
                                role="switch" 
                                id="flexSwitchCheckDefault" 
                                onClick={this.toggle} 
                            />
                        </div>
                    </div>
                </nav>
            </div>
        )
    }
}

export default Navbar

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