useState 使用反应时出现错误“TypeError：无法读取 null 的属性（读取“useState”）”

Question

因此，我尝试在 nextjs 应用程序中使用 useState，但是一旦我添加代码行来初始化 useState，它就会抛出一个弹出错误，并显示错误消息：TypeError: Cannot read properties of null (reading 'useState')

这是我的代码的简化版本：

import { useState } from 'react'

export default function Home() {
    return (
        <div>
            <Transactions />
        </div>
    )
}



const Transactions = () => {

    const [state, setState] = useState('test')
...
}

我正在运行的 React/Next 版本：

"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"

chrome开发工具的错误截图：

对于造成这种情况的原因有什么想法吗？谢谢

编辑 我这边非常愚蠢的错误，问题通过导入反应解决了......

Answer 1

如果您使用Next 13 App 路由器，如果您使用异步函数，则可能会发生这种情况

错误的：

"use client"

export default async function Page() {
    const [variable, setVariable] = useState();
}

正确的：

"use client"

export default async function Page() {
    const [variable, setVariable] = useState();
}

Answer 2

只需在 Home 函数中定义 State 即可

Answer 3

所以我分叉并克隆了你的 github 存储库，但无法在我的系统上重现该错误。我发现的一件事是在您导入的 navBar 组件中

import Link from 'next/Link'

这给我带来了一个错误，直到我接下来可以更改它/链接到小写

import Link from 'next/link'

我建议做的是重新安装 React，只需使用一个简单的 npm 命令来查看是否可以解决您的问题。如果没有请告诉我！

npm uninstall react
npm install react@latest

Answer 4

您可以在函数组件之外使用“hook”吗，因为 hook 在函数之外不起作用