是我失去理智了，还是这些功能组件使用了无效的钩子调用？

Question

从昨晚开始，我就一直把头撞在桌子上，试图找出是什么导致了我的AstroJS项目中的这个警告。我目前正在构建一个带有React组件的AstroJS项目，并且当我在dev中运行它时，我的终端在没有进行任何重大更改的情况下通过这些错误启动了它：

警告:无效的钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：

1. 您可能有React的不匹配版本和呈现器(例如React )
2. ，您可能正在违反Hooks
3. 的规则，您可能在同一个应用程序

中有多个React副本。

有关如何调试和修复此问题的提示，请参见https://reactjs.org/link/invalid-hook-call。

我已经和React一起工作了一段时间了，我很确定我知道如何在功能组件中使用钩子，但是也许我只是瞎了眼，缺少了一些东西。我还通过运行npm ls react检查了React和renderer的不匹配版本，并且我可以看到版本正在匹配：

@example/minimal@0.0.1 /Users/austinspinazze/Desktop/Projects/Uncharted-Labs-V1
└─┬ @astrojs/react@1.0.0
  ├─┬ react-dom@18.2.0
  │ └── react@18.2.0 deduped
  └── react@18.2.0

因此，这似乎也不是问题所在。我也非常肯定，我没有超过一个副本的反应在我的天文项目，但我不知道如何检查这一点？

到目前为止，以下是Astro项目中仅有的两个React组件：

纳瓦

import React, { useState } from 'react';

const Navbar = () => {
    const [mobileMenu, setMobileMenu] = useState(false);

    const menuToggle = () => {
        mobileMenu ? setMobileMenu(false) : setMobileMenu(true);
        console.log(mobileMenu);
    };

    return (
        <nav className={[' w-full mx-auto bg-green-white']}>
            <div className='flex items-center justify-between space-x-20 px-10'>
                <div className='z-30 '>
                    <img
                        src='/assets/Uncharted_Labs_1.png'
                        alt=''
                        id='logo'
                        className='max-h-24'
                    />
                </div>
                <div className='hidden items-center md:space-x-10  uppercase text-dark-green md:flex'>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        About
                    </a>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        Services
                    </a>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        Pricing
                    </a>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        Blog
                    </a>

                    <a
                        href='#'
                        className='px-8 py-2 border-2 border-dark-green rounded-lg shadow-md hover:text-green-white hover:bg-dark-green ease-in-out duration-200 font-bold'
                    >
                        Contact
                    </a>
                </div>
                {/* Hamburger Button */}
                <button
                    onClick={menuToggle}
                    className='space-y-2 md:hidden cursor-pointer'
                >
                    <span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
                    <span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
                    <span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
                </button>
            </div>

            {/* Mobile menu */}
            {mobileMenu && (
                <div
                    id='menu'
                    className='absolute p-6 md:hidden rounded-b-lg bg-green-white left-6 right-6 top-30 z-100'
                >
                    <div className='flex flex-col items-center justify-center w-full space-y-6 font-bold text-dark-green rounded-sm'>
                        <a href='#' className='w-full text-center'>
                            About
                        </a>
                        <a href='#' className='w-full text-center'>
                            Services
                        </a>
                        <a href='#' className='w-full text-center'>
                            Pricing
                        </a>
                        <a
                            href='#'
                            className='w-full pt-6 border-t border-gray-400 text-center'
                        >
                            Blog
                        </a>
                        <a
                            href='#'
                            className='w-full py-3 text-center rounded-full bg-dark-green text-green-white font-bold'
                        >
                            Contact
                        </a>
                    </div>
                </div>
            )}
        </nav>
    );
};

export default Navbar;

英雄

import React from 'react';

import styles from './styles.module.css';

const Hero = () => {
    return (
        <div className='flex flex-col gap-8 justify-items-center items-center mx-auto xl:px-20 px-10 lg:grid lg:grid-cols-hero'>
            <div id='hero-text' className='max-w-xl'>
                <h5 className='text-dark-green-text text-base leading-8 font-epilogue tracking-wide my-8'>
                    UNCHARTED LABS
                </h5>
                <h1 className='text-green-white font-epilogue font-bold my-8 xl:text-7xl text-5xl'>
                    The Simple, Clean Design
                </h1>
                <p className='text-light-grey-text font-epilogue leading-8 my-8 opacity-[.67]'>
                    Agency provides a full service range including technical
                    skills, design, and business understanding.
                </p>
                <button className='bg-dark-green-text pt-4 pb-3  px-5 rounded-md font-epilogue text-light-grey-text drop-shadow-md mt-5 font-bold'>
                    START EXPLORING
                </button>
            </div>
            <div id='hero-img' className='max-w-xl lg:max-w-3xl'>
                <div className={`${styles.blob}`}>
                    <image src='/assets/Hero.png' className='max-w-[120%]' />
                </div>
            </div>
        </div>
    );
};

export default Hero;

导入和使用Navbar和Hero组件的Astro

---
import Hero from "../components/Hero/index";
import "../styles/global.css";
import Navbar from "../components/Navbar/index";
---

<html lang="en" class="top-0">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Uncharted Labs</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Epilogue:wght@400;700&display=swap"
            rel="stylesheet"
        />
    </head>

    <body class="bg-dark-green">
        <Navbar client:load />
        <main class="flex justify-center mt-20">
            <section
                class="flex mt-10 sm:items-center w-full h-screen sm:mt-0 lg:h-[80vh]"
            >
                <Hero />
            </section>
        </main>
    </body>
</html>

Answer 1

因此，我发现了这个问题，但没有找到为什么会发生这种情况的确切答案，但很明显，@astro/react中目前存在一个bug，迫使您实际直接导出这样的组件：

export default function Navbar() {
    const [mobileMenu, setMobileMenu] = useState(false);

    const menuToggle = () => {
        mobileMenu ? setMobileMenu(false) : setMobileMenu(true);
        console.log(mobileMenu);
    };

    return (
        <nav className={[' w-full mx-auto bg-green-white']}>
            <div className='flex items-center justify-between space-x-20 px-10'>
                <div className='z-30 '>
                    <img
                        src='/assets/Uncharted_Labs_1.png'
                        alt=''
                        id='logo'
                        className='max-h-24'
                    />
                </div>
                <div className='hidden items-center md:space-x-10  uppercase text-dark-green md:flex'>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        About
                    </a>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        Services
                    </a>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        Pricing
                    </a>
                    <a
                        href='#'
                        className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
                    >
                        Blog
                    </a>

                    <a
                        href='#'
                        className='px-8 py-2 border-2 border-dark-green rounded-lg shadow-md hover:text-green-white hover:bg-dark-green ease-in-out duration-200 font-bold'
                    >
                        Contact
                    </a>
                </div>
                {/* Hamburger Button */}
                <button
                    onClick={menuToggle}
                    className='space-y-2 md:hidden cursor-pointer'
                >
                    <span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
                    <span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
                    <span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
                </button>
            </div>

            {/* Mobile menu */}
            {mobileMenu && (
                <div
                    id='menu'
                    className='absolute p-6 md:hidden rounded-b-lg bg-green-white left-6 right-6 top-30 z-100'
                >
                    <div className='flex flex-col items-center justify-center w-full space-y-6 font-bold text-dark-green rounded-sm'>
                        <a href='#' className='w-full text-center'>
                            About
                        </a>
                        <a href='#' className='w-full text-center'>
                            Services
                        </a>
                        <a href='#' className='w-full text-center'>
                            Pricing
                        </a>
                        <a
                            href='#'
                            className='w-full pt-6 border-t border-gray-400 text-center'
                        >
                            Blog
                        </a>
                        <a
                            href='#'
                            className='w-full py-3 text-center rounded-full bg-dark-green text-green-white font-bold'
                        >
                            Contact
                        </a>
                    </div>
                </div>
            )}
        </nav>
    );
}

如果您想了解更多关于这种情况发生的潜在原因，并且希望通过一个有趣的公关来解决，那么您可以查看这个Github问题https://github.com/withastro/astro/issues/4220。