错误！：setShowCatMenu 不是函数

Question

所以，我正在解决这个问题，但我没有找到解决方案。错误是我无法将 setShowCatMenu 作为函数类型获取：下面的代码

菜单.jsx

import React from 'react';
import Link from 'next/link';
import { BsChevronDown } from 'react-icons/bs';

const data = [
  { id: 1, name: 'Home', url: '/' },
  { id: 2, name: 'About', url: '/about' },
  { id: 3, name: 'Categories', subMenu: true },
  { id: 4, name: 'Contact', url: '/contact' },
];

const subMenuData = [
  { id: 1, name: 'Jordan', doc_count: 11 },
  { id: 2, name: 'Sneakers', doc_count: 8 },
  { id: 3, name: 'Running shoes', doc_count: 64 },
  { id: 4, name: 'Football shoes', doc_count: 107 },
];

const Menu = ({ showCatMenu, setShowCatMenu }) => {
  return (
    <ul className="hidden md:flex items-center gap-8 font-medium text-black">
      {data.map((item) => {
        return (
          <React.Fragment key={item.id}>
            {!!item?.subMenu ? (
              <li
                className="cursor-pointer flex items-center gap-2 relative"
                onMouseEnter={() => setShowCatMenu(true)}
                onMouseLeave={() => setShowCatMenu(false)}
              >
                {item.name}
                <BsChevronDown size={14} />

                {showCatMenu && (
                  <ul className="bg-white absolute top-6 left-0 min-w-[250px] px-1 text-black shadow-lg">
                    {subMenuData.map((submenu) => {
                      return (
                        <Link key={submenu.id} href="/">
                          <li
                            className="h-12 flex justify-between items-center px-3 hover:bg-black/[0.03]
                          rounded-md"
                          >
                            {submenu.name}
                            <span className="opacity-50 text-sm">78</span>
                          </li>
                        </Link>
                      );
                    })}
                  </ul>
                )}
              </li>
            ) : (
              <li className="cursor-pointer">
                <Link href={item?.url}>{item.name}</Link>
              </li>
            )}
          </React.Fragment>
        );
      })}
    </ul>
  );
};

export default Menu;

**

标头.jsx**

import React, { useState, useEffect } from 'react';
import Wrapper from './Wrapper';
import Menu from './Menu';

import Link from 'next/link';

const Header = () => {
  const { mobileMenu, setMobileMenu } = useState(false);
  const { showCatMenu, setShowCatMenu } = useState(false);
  const { show, setShow } = useState('translate-y-0');
  const { lastScrollY, setLastScrollY } = useState(0);

  return (
    <header
      className={`w-full h-[50px] md:h-[80px] bg-white flex items-center justify-between
       z-20 sticky top-0 transition-transform duration-300 ${show}`}
    >
      <Wrapper>
        <Link href="/">
          <img src="/logo.svg" className="w-[40px] md:w-[60]" />
        </Link>
        <Menu showCatMenu={showCatMenu} setShowCatMenu={setShowCatMenu} />
      </Wrapper>                        *         Problem Here        *
    </header>
  );
};

export default Header;

同样的问题也在Menu.jsx文件中

请有人解决这个问题，那就太好了，提前致谢。

我就像期待得到正确答案但没有得到。请帮忙！

Answer 1

根据我的理解和代码审查，问题在于如何初始化 Header.jsx 文件中的状态变量。您正在使用 useState Hook，将其视为具有属性的对象。相反，useState 返回一个包含两个元素的数组：状态变量和更新该变量的函数。您可以通过以下方式修复它：

1. 将 {} 的所有实例替换为 [] 以初始化状态变量。
2. 将状态变量声明中的 = 实例更改为 =。

下面是更正后的 Header.jsx 代码：

import React, { useState, useEffect } from 'react';
import Wrapper from './Wrapper';
import Menu from './Menu';
import Link from 'next/link';

const Header = () => {
  const [mobileMenu, setMobileMenu] = useState(false);
  const [showCatMenu, setShowCatMenu] = useState(false);
  const [show, setShow] = useState('translate-y-0');
  const [lastScrollY, setLastScrollY] = useState(0);

  return (
    <header
      className={`w-full h-[50px] md:h-[80px] bg-white flex items-center justify-between
       z-20 sticky top-0 transition-transform duration-300 ${show}`}
    >
      <Wrapper>
        <Link href="/">
          <img src="/logo.svg" className="w-[40px] md:w-[60]" />
        </Link>
        <Menu showCatMenu={showCatMenu} setShowCatMenu={setShowCatMenu} />
      </Wrapper>
    </header>
  );
};

export default Header;

通过这些更改，您的状态变量将使用 useState 钩子正确初始化，并且您应该不再遇到您提到的错误。

Answer 2

正如上一篇文章中提到的，问题出在状态初始化中。

状态初始化：使用useState钩子时，应该使用解构赋值来获取状态值及其setter函数。但是，您通过用大括号括住每个状态变量来错误地使用解构。应该这样做：

const [mobileMenu, setMobileMenu] = useState(false);
const [showCatMenu, setShowCatMenu] = useState(false);
const [show, setShow] = useState('translate-y-0');
const [lastScrollY, setLastScrollY] = useState(0);