React跨组件点击切换报错：TypeError: Cannot read properties of null (reading 'useState')

错误原因及修复步骤 #

1. 未导入useState钩子 #

TypeError: Cannot read properties of null (reading 'useState')的直接原因是没有从React中显式导入useState，React钩子必须导入后才能使用。

2. 子组件未接收父组件状态 #

SubMenu无法访问MainMenu中的切换状态，因为状态是父组件的局部变量，需要通过props传递给子组件。

3. 变量拼写错误 #

代码中将toggle误写为toogle，导致状态无法正确读取和更新。

4. 未定义的变量 #

SubMenu里的title和imgUrl未声明，需通过props传入或在组件内部定义。

修复后的完整代码 #

Menu.tsx #

import { useState, FC } from 'react';
// 根据实际项目导入Image组件，示例用next/image
import Image from 'next/image';

// 定义SubMenu的props类型
interface SubMenuProps {
  toggle: boolean;
  title: string;
  imgUrl: string;
}

export const MainMenu: FC = () => {
    // 修正拼写：toogle → toggle
    const [toggle, setToggle] = useState(false);
    // 定义菜单标题和图片路径
    const menuTitle = "菜单标题";
    const menuImgUrl = "/path/to/menu-icon.png";

    return(
        <>
            {/* 通过props传递状态和参数给SubMenu */}
            <SubMenu toggle={toggle} title={menuTitle} imgUrl={menuImgUrl} />
            <div>
              <button onClick={() => setToggle(!toggle)}>click</button>
            </div>
        </>
    );
}

export const SubMenu: FC<SubMenuProps> = ({ toggle, title, imgUrl }) => {
    return(
        <>
           <div className="menu">
             <Image src={imgUrl} width="20" height="20" alt="菜单图标" />
           </div>
           {/* 使用父组件传递的toggle状态控制文本显示 */}
           {toggle && (<span className="menu-text">{title}</span> )}  
        </>
    );
}

App.tsx #

// 修正导入路径拼写错误：Memu → Menu
import { MainMenu} from '../Menu';

function App() {
  return (
    <MainMenu />
  );
}
export default App;

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