Nextjs 14 应用程序路由器抱怨我违反了 Hooks 规则，而我却没有

Question

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

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本 有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。 ⨯ 类型错误：无法读取 null 的属性（读取“useState”） 在 SelectedItemsUser (./components/Header/SelectedItemUser.jsx:24:86)

'use client';
import { FaShoppingCart } from 'react-icons/fa';
import { useState } from 'react';
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import SkinCard from '@components/Skins/SkinCard';
import { SUPPORTED_CURRENCIES, paths } from '@app/paths';
import { usePathname } from 'next/navigation';
const SelectedItemsUser = (props) => {
    const {left,authenticated} = props;
    const [collapsed, setCollapsed] = useState(false);
    const {t} = useTranslation('trade');
    const selectedItems = useSelector(state => state.userInventory);
    const path = usePathname();
    const getItemPrice = (item) => {
        switch(path){
        case paths.BUY:
            return item.buyPrice;
        case paths.SELL:
            return item.price;
        case paths.TRADE:
            return item.tradePrice;
        default:
            return item.price;
        }
    };
    
    return (
        <div className={`w-full flex flex-col gap-1 rounded-6 overflow-hidden transition-all duration-200 select-none bg-bg-16 ${collapsed ? 'hover:bg-bg-29' : ''}`}>
            <div className={`w-full h-12 flex ${left ? 'flex-row-reverse' : 'flex-row'} items-center justify-between cursor-pointer ${collapsed ? 'bg-inherit' : 'transition-all duration-200 bg-bg-16 hover:bg-bg-29'} px-6 py-2`} onClick={() => setCollapsed(prev => !prev)}>
                <div className={`h-full flex ${left ? 'flex-row-reverse' : 'flex-row'} gap-2 items-center h-12 text-main`}>
                    <FaShoppingCart className="text-current text-12 xl:text-14" color="#FF4B4B"/>
                    
                    <p className="text-12 text-main font-medium flex flex-row items-center">
                        <span>{SUPPORTED_CURRENCIES[props.activeCurrency]?.symbol || '$'}{selectedItems.reduce((acc, item) => acc + (getItemPrice(item) / 100), 0).toFixed(2)}</span>
                    </p>
                    
                    {selectedItems && selectedItems.length >0 && (
                        <p className="text-10 bg-red text-main font-medium flex flex-row items-center py-0 px-1.5 rounded-full">{selectedItems.length}</p>
                    )}
                </div>
                <div className={`center gap-1.5 select-none text-main flex ${left ? 'flex-row' : 'flex-row-reverse'}`}>
                    {collapsed
                        ? (<FaChevronDown className={`text-current text-10 xl:text-12 ${left ? 'mr-2' : 'ml-2'}`} />)
                        : (<FaChevronUp className={`text-current text-10 xl:text-12 ${left ? 'mr-2' : 'ml-2'}`} />)
                    }
                    <p className="text-12 text-main font-medium capitalize">{t('trade_title')} {left ? t('trade_title_1') : t('trade_title_2')}</p>
                    <svg width="13" height="9" viewBox="0 0 13 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.2055 5.67345H5.78483C5.45973 5.67345 5.19629 5.9369 5.19629 6.26199C5.19629 6.58696 5.45974 6.85053 5.78483 6.85053H10.3847L9.28262 8.00511C9.05819 8.24035 9.06689 8.6129 9.30213 8.83721C9.53725 9.06164 9.90982 9.05294 10.1342 8.81782L12.0959 6.76217C12.313 6.53476 12.313 6.17688 12.0959 5.94945L10.1342 3.89379C9.9098 3.65868 9.53723 3.64998 9.30213 3.87441C9.06689 4.09884 9.05819 4.47128 9.28262 4.7065L10.2055 5.67345Z" fill="#FF4B4B" />
                        <path d="M2.05325 1.96182H6.47397C6.79894 1.96182 7.06251 2.22527 7.06251 2.55036C7.06251 2.87545 6.79893 3.1389 6.47397 3.1389H1.87414L2.97617 4.29361C3.20048 4.52873 3.19178 4.9013 2.95666 5.12571C2.72155 5.35011 2.34897 5.34131 2.12457 5.1062L0.16273 3.05054C-0.0542433 2.82313 -0.0542433 2.46535 0.16273 2.23795L2.12457 0.182294C2.349 -0.0529462 2.72157 -0.0616471 2.95666 0.162784C3.19178 0.387214 3.20048 0.759785 2.97617 0.994882L2.05325 1.96182Z" fill="#FF4B4B" fillOpacity="0.25" />
                    </svg>
                </div>
            </div>

我正在使用redux

我尝试移动钩子，并将路径名导入为道具，但这也没有帮助。不知道如何解决这个问题。我正在使用 nextjs 14 应用程序路由器，并且对它还很陌生。

Answer 1

乍一看，你对钩子的使用似乎不错。所以我会说它不是 2。

保留 1. 和 3.

1. 您检查过您正在使用哪个版本的

   react

   和

   react-dom

   吗？遵循文档 next.js 有很强的要求：https://nextjs.org/docs/messages/react-version
2. 你的项目中使用了 2 个版本的 React 吗？