Next.js 13中无法使用useState钩子的问题求助

问题详情 #

在Next.js 13项目的函数组件中使用useState钩子时，触发了"Invalid hook call"错误，即使按规范使用仍无法解决。

• 复现步骤：
  1. 创建Next.js 13项目；
  2. 在函数组件中引入并使用useState钩子；
  3. 运行项目后观察到错误提示。
• 预期行为：函数组件中正常使用useState，无报错。
• 实际行为：收到"Invalid hook call"错误，状态无法正常工作。

相关代码片段 #

"use client"

import { Box, Button, Input, Text } from '@/components'
import Image from 'next/image'
import { useState } from 'react'

export default function Home() {
    const [rememberMe, setRememberMe] = useState<boolean>(false)

    return (
        <Box className='w-screen h-screen'>
            <Box className='w-1/2 h-full p-24 pt-12 flex-col justify-around'>
                <Text className='font-black text-3xl'>TOOTO ADMIN</Text>
                <Box className='flex-col space-y-6' >
                    <Text className='text-3xl' >Welcome back!</Text>
                    <Text>Enter your Credentials to access your account</Text>
                    <Box className='flex-col' >
                        <Text>Email address</Text>
                        <Input placeholder='Enter your email' width={'100%'} height={'40px'} />
                    </Box>
                    <Box className='flex-col' >
                        <Box className='justify-between' >
                            <Text>Password</Text>
                            <Text className='text-[#82A957] text-xs underline cursor-pointer'>forgot password</Text>
                        </Box>
                        <Input placeholder='Enter your password' width={'100%'} height={'40px'} />
                    </Box>
                    <Box className='flex' >
                        <Box onClick={() => setRememberMe(!rememberMe)} className='w-auto space-x-1.5 cursor-pointer' >
                            <Image src={rememberMe ? "/remember-me-icon-checked.svg" : "/remember-me-icon.svg"} alt="remember me icon" width={9} height={10} />
                            <Text className='text-xs' >Remember me</Text>
                        </Box>
                    </Box>
                    <Button width={`100%`} height={`32px`} className={`flex rounded-lg justify-center items-center`}>
                        <Text className='text-default_white font-bold text-sm'>Login</Text>
                    </Button>
                </Box>
            </Box>
            <Box className='w-1/2 h-full'>
                <Image src='/login-background.jpg' alt='login-background'
                    className='w-full h-full rounded-l-3xl'
                    width={782}
                    height={1042} />
            </Box>
        </Box>
    )
}

错误截图 #

• 终端错误提示：
• 本地服务错误提示：

解决方案 #

这个错误在Next.js 13中通常由以下几种原因导致，对应解决方法如下：

1. 确认"use client"指令位置 #

"use client"必须是文件的第一行代码，不能有任何前置的空格、注释或其他字符。检查你的代码，确保它处于文件最顶部。

2. 修复React版本一致性 #

项目中存在多个React实例会导致钩子调用不匹配，执行以下命令更新依赖：

npm install react@latest react-dom@latest

如果使用yarn：

yarn add react@latest react-dom@latest

3. 确保组件为客户端组件 #

Next.js 13默认是服务器组件，只有添加"use client"后才会转为客户端组件，才能使用React钩子。确认组件文件顶部已正确声明该指令。

4. 检查钩子调用规则 #

确保useState在函数组件的顶层作用域调用，不能放在条件判断、循环或嵌套函数内部（你的代码中这部分符合规范，可忽略此步）。

5. 清除缓存并重启服务 #

缓存异常也可能引发该问题，执行以下步骤：

• 删除项目根目录下的.next文件夹
• 清除npm/yarn缓存：npm cache clean --force 或 yarn cache clean
• 重启开发服务器：npm run dev 或 yarn dev

内容的提问来源于stack exchange，提问作者Anand-Ochir Uranchimeg