错误 [TypeError]：无法读取 null 的属性（读取“useId”）

Question

我正在尝试运行我的

PromptGenerator

函数，并收到此错误

- error Error [TypeError]: Cannot read properties of null (reading 'useId')

。 完整的错误消息/警告是：

See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
- error Error [TypeError]: Cannot read properties of null (reading 'useId')

• 函数调用位于函数组件中的

  top-level

  处，如图所示。
• 如果我的应用程序的结构是

  pages/api/fileName.js

  而不是

  pages/app/page.tsx

  ，会有影响吗？

我的完整代码：

import React, { useState } from "react";
import { useChat } from "ai/react";

export default function PromptGenerator() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "./chat_bot",
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === "user" ? "User: " : "AI: "}
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input
            id={2}
            className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
            value={input}
            name="formInput"
            placeholder="Describe your business..."
            onChange={handleInputChange} // updating the input state
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

非常感谢您的每一条评论。预先感谢。

在调试时，我尝试隔离代码中的部分以捕获问题，我相信这是引发错误的部分：

import React, { useState } from "react";
import { useChat } from "ai/react";

export default function PromptGenerator() {
  const {
    messages: prompt,
    user,
    input,
    handleInputChange,
    handleSubmit: handleFormSubmit,
  } = useChat({
    api: "./chat_bot",
  })};

我正在运行下面的软件包，并安装了最新的

NextJS and react

：

"dependencies": {
    "@clerk/nextjs": "^4.16.1",
    "@clerk/themes": "^1.6.1",
    "@headlessui/react": "^1.7.14",
    "@heroicons/react": "^2.0.17",
    "@huggingface/inference": "^1.8.0",
    "@prisma/client": "^4.15.0",
    "ai": "^2.1.8",
    "dotenv": "^16.3.1",
    "eslint": "8.37.0",
    "eslint-config-next": "^13.4.7",
    "langchain": "^0.0.81",
    "next": "^13.4.7",
    "pdf-parse": "^1.1.1",
    "pgvector": "^0.1.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typewriter-effect": "^2.20.1"
  },

Answer 1

我在 React js 中遇到了这个问题。

我认为代码没有问题。但你的模块有问题。它被错误地安装在两个不同的目录中。这就是脚本运行不好的原因。

我通过以下方式解决这个问题：

首先在 cmd 中针对项目目录运行此命令

npm ls 反应

然后您将看到类似的输出（这只是一个示例。可能您有其他路径来复制您的脚本。）：

PS C:\Users\otherpath> npm ls 反应 [电子邮件受保护] C:\Users\otherpath

├─┬ @emotion/[email protected]
│ ├─┬ @emotion/[email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]
**

检查该路径并验证 C:\Program Files

中的相同模块

如果两个目录都有相同的模块，请删除上面的用户路径模块，然后再次运行脚本。

或者您可以重新启动 IDE 软件。

欲了解更多信息，您可以查看此链接此处。

Answer 2

我在带有 React Native 应用程序和 Web 前端的 monorepo 中遇到了这个问题。

事实证明 React 的版本不同。如果您将版本固定在

package.json

文件中，则可以解决该问题。