NextJS API 目录和 useState

Question

我想得到

const [data, setData] = React.useState('');
const [pointdata, setPointData] = React.useState('');

在我的 API 目录中。 但是，每次我尝试运行代码时，我都会得到Cannot read properties of null (reading 'useState'

但是，当它位于/page/myfile.js中时，相同的代码可以正常工作

我如何将useState和useEffect放在 API 目录中，或者是他们的另一种方式吗？

为什么它是一个 API 文件，因为我们正在向它发布表单数据。

import React, { useState } from "react";
export default async function gll(req, res) {
  const [data, setData] = React.useState('');
  const [pointdata, setPointData] = React.useState('');
        
}

Answer 1

您不能在 api 目录中使用useState和/或useEffect 。 由于 React 是一个前端库，您只能在客户端代码中使用它的钩子，即/page/[fileName].js 。 您在/api/[fileName].js中编写的代码是后端代码，因此您不能在那里使用 React.js 挂钩

根据官方 Next.js 文档。

API 路由提供了使用 Next.js 构建 API 的解决方案。

文件夹 pages/api 中的任何文件都映射到 /api/* 并且将被视为 API 端点而不是页面。

了解更多信息。 访问API 路由 | Next.js