为什么 useState 在我的 React 组件中不起作用，我该如何修复它？ [已关闭]

Question

我在我的 React 组件之一中遇到了 useState 问题。虽然我在另一个组件中成功使用了 useState，但它似乎在这个组件中不起作用，并且出现以下错误：

第 7:31 行：React Hook“useState”在函数“categories”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。 React 组件名称必须以大写字母开头。 React Hook 名称必须以“use”一词开头。

这是我遇到问题的组件的代码：

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>
          <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>
  );

};

我注意到的：

Error Explanation: The error message indicates that useState is being called in a function that is neither a React component nor a custom Hook, and it also mentions that component names must start with an uppercase letter.
Working Example: I have another component where I used useState in a similar way, and it works perfectly fine.

我的问题：

Why is useState not working in this component?
What exactly does the error message mean when it refers to the component name needing to start with an uppercase letter?
How can I fix this issue so that useState works correctly in this component?

任何关于我做错了什么以及如何解决这个问题的指导将不胜感激！

导出默认类别；

Answer 1

错误消息准确地告诉您要修复的内容：

React 组件名称必须以大写字母开头。

您应该将组件命名为

Categories

而不是

categories

。

Answer 2

我在自己的机器上测试了你的代码，它对我来说工作得很好，但根据你发送的内容，我认为问题可能是因为你没有以大写字母开头组件的名称。

顺便说一下，我认为你应该将其替换为当前的按钮标签：

<button className={`${styles.menu}${isOpen ? "active" : ""}`} onClick={() => setOpen (!isOpen)}>