在使用React中的useState时遇到错误“TypeError: Cannot read properties of null (reading 'useState')”。

Question

我正在尝试在我的Next.js应用中使用useState，但是一旦我添加了初始化useState的代码行，它就会弹出一个错误窗口，显示以下错误消息：TypeError：无法读取null的属性（读取'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开发工具中的错误截图：

有什么想法是什么原因导致的？谢谢。

编辑我自己犯了一个非常愚蠢的错误，通过引入React解决了这个问题...

- Brace Sproul

---

我无法使用您的简化代码进行重现，因此问题很可能在细节方面。您能否提供完整的示例？ - Nick Bailey

仓库链接：https://github.com/bracesproul/Budget-Tracker/blob/main/pages/dashboard.js - Brace Sproul

@BraceSproul，我遇到了这个错误，并且已经导入了react。我正在使用最新的nextjs、react和typescript。 - Kirk Ross

Answer 1

如果您正在使用 Next 13 应用程序路由器，则可能会发生这种情况，如果您正在使用异步函数，则可能会发生这种情况。

"use client"

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

正确：

"use client"

export default function Page() { //Remove Async Keyword
        const [variable, setVariable] = useState();
}

- jusimen

---

如果我需要将函数设置为异步的呢？ - Jack Damon

你需要使用'useEffect'来获取数据，并使用'useState'来管理页面加载状态。@JackDamon - jusimen

Answer 2

只需在 Home 函数内定义状态

- Alireza Khaksar

---

哈哈，我犯了这个错误。谢谢啦！ - Eklavya Chandra

你能分享修复后的代码吗？ - MarkWalczak

Answer 3

我fork并克隆了你的Github仓库，但是在我的系统上无法重现错误。我发现你的navBar组件中导入了

import Link from 'next/Link'

由于我需要将next/link转换为小写字母，所以它导致了错误。

import Link from 'next/link'

我建议你重新安装React，只需要用简单的npm命令即可，以查看是否可以解决你的问题。如果不行，请告诉我！

npm uninstall react
npm install react@latest

- Mason Clark

Answer 4

也许你在函数组件外使用了“hook”，因为“hook”无法在函数外工作。

- IMRAN KALEEL

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Nuriddin Rashidov

Answer 5

即使导入了react、usestate并在函数内部定义了usestate，仍然出现错误。实际问题是我在导出行中调用了函数，移除了()后错误得到解决。希望这能帮到你。

- Karthick R

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到更多关于如何撰写好回答的信息。 - undefined

Answer 6

只需创建一个名为“hooks”的文件夹，将此代码添加到其中即可。 我曾经遇到同样的问题，这个方法对我有用。

- Bruno

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 7

主要是因为没有在被导出的函数内使用useState，导致错误。
只需在函数内使用useState，问题就会得到解决！

- Parth Puranik

Answer 8

遇到了相同的错误提示，这行代码基本上解决了它。

import React，{ useState } from 'react';

发现我导入不正确，这是导致我的问题的原因。 希望有所帮助。

- Mike Caballero

Answer 9

使用函数如下：

export default function Register () {
  const [credentials, setCredentials] = useState();

这对你有用

- Shehan Lakshitha

Answer 10

这也可能是因为您导出函数的方式不正确：

错误的方式：

export default YourComponent();

正确：

export default YourComponent;

- Misguided Chunk