React组件中useState无法使用的原因及修复方法求助

1. 为何该组件中的useState无法正常工作？ #

React Hooks（比如useState）只能在两种合法场景下调用：

• React函数组件（首字母大写的函数）
• 自定义Hook（名称以use开头的函数）

你的组件函数名是小写的categories，React会将其识别为普通JavaScript函数而非React组件，在普通函数内调用Hook违反了React的Hook使用规则，因此触发报错。

2. 错误提示中“组件名称必须以大写字母开头”具体指什么？ #

这是React的核心约定，也是ESLint的强制校验规则：

• 只有首字母大写的函数，才会被React判定为React组件，允许在内部使用Hooks
• 小写开头的函数会被视为普通工具函数，不能在其中调用任何React Hooks

这个规则是为了让React区分组件和普通函数，同时保障Hooks始终按照规则执行（比如避免在条件判断、循环中调用Hook）。

3. 如何修复该问题，让useState在该组件中正常工作？ #

只需要将组件函数名改为首字母大写，同步修改导出语句即可。另外代码中存在一处样式引用的小错误，也需要一并修正：

修复后的完整代码：

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import styles from './categories.module.css';

// 组件名改为首字母大写
const Categories = () => {
   const [isOpen, setOpen] = useState(false);

  return (
      <div>
          {/* 修正样式引用：styles.menu 需要用 ${} 包裹才能正确取到模块化样式类名 */}
          <button className={`${styles.menu} ${isOpen ? "active" : ""}`} onClick={() => setOpen(!isOpen)}>
              <div className="div">TRP</div>
          </button>
          <nav className={styles.menu}>
              <ul className={styles.menu__list}>
                  <li className={styles.menu__item}>TRP</li>
                  <li className={styles.menu__item}>Investments</li>
              </ul>
          </nav>
      </div>
  );
};

// 导出对应大写的组件名
export default Categories;

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