我在客户端组件中使用NextJS v14.1.0和服务器操作.我得到了正确的消息,但也得到了一个TypeError,即Body不可用.

src/app/auth/account-verification/page.tsx

const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const data = { requestId: token, otp: parseInt(otp) };
    const response = await AccountVeficationAction(data);
    ActionResponseHandler(response, "Account Verification");
    if (response.success) {
      Router.push("/auth/login");
    }
  };

/src/app/auth/_utils/actions/action.ts

export const AccountVeficationAction = async (body: any) => {
  try {
    const response = await fetch(`${BASEURL}/auth/confirm-account`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        // Add other necessary headers (e.g., authorization)
      },
      body: JSON.stringify(body), // Access data from the request body
    });
    console.log(await response.json());
    return await response.json();
  } catch (error) {
    console.log(error);
    return {
      success: false,
      message: "Something went wrong!",
    };
  }
};

现在,当我在提交Fetch时从/Account-Verify/page.tsx使用这个Account-VerphaationAction函数时,就会像预期的那样工作.但是,我没有任何关于成功或从我得到的适当回应:类型错误:Body is Unuable

以下是我得到的信息:

{
  success: true,
  message: 'Confirmed successfully. Account is activated now.',
  statusCode: 200
}
TypeError: Body is unusable
    at specConsumeBody (node:internal/deps/undici/undici:4521:15)
    at _Response.json (node:internal/deps/undici/undici:4425:18)
    at AccountVeficationAction (webpack-internal:///(action-browser)/./src/app/auth/_utils/actions/actions.ts:76:31)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406
    at async t4 (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6379)
    at async rk (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:25934)
    at async doRender (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1394:30)    
    at async cacheEntry.responseCache.get.routeKind (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1555:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1463:28)
    at async DevServer.renderPageComponent (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1856:24)
    at async DevServer.renderToResponseImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:1894:32)
    at async DevServer.pipeImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:911:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\next-server.js:271:17)
    at async DevServer.handleRequestImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\base-server.js:807:17)
    at async C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\dev\next-dev-server.js:331:20        
    at async Span.traceAsyncFn (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\trace\trace.js:151:20)   
    at async DevServer.handleRequest (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
    at async invokeRender (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\router-server.js:163:21)
    at async handleRequest (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\router-server.js:342:24)
    at async requestHandlerImpl (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\router-server.js:366:13)
    at async Server.requestListener (C:\Works\Programming\CrescentsStack\deinhandymarkt\node_modules\.pnpm\next@14.1.0_@babel+core@7.23.7_react-dom@18.2.0_react@18.2.0_sass@1.70.0\node_modules\next\dist\server\lib\start-server.js:140:13)

到目前为止,我还不知道该怎么处理这件事.

推荐答案

看起来你要打两次res.json().在第一个流之后,该流已被消耗.将结果存储在一个变量中,并将其设置为log并提供返回值.即

console.log(await response.json());
return await response.json();

const responseBody = await response.json();
console.log(responseBody);
return responseBody;

Typescript相关问答推荐

使用前的组件渲染状态更新

如果在TypeScript中一个原始的类方法是递归的,如何使用类decorator 模式?

忽略和K的定义

如何提取密钥及其对应的属性类型,以供在新类型中使用?

泛型类型联合将参数转换为Never

如何在Angular 12中创建DisplayBlock组件?

Material UI / MUI系统:我如何告诉TypeScript主题是由提供程序传递的?

有什么方法可以类型安全地包装import()函数吗?

将带点的对象键重新映射为具有保留值类型的嵌套对象

下载量怎么会超过下载量?

确保对象列表在编译时在类型脚本中具有唯一键

如何在Angular 服务中制作同步方法?

在抽象类属性定义中扩展泛型类型

react 路由不响应参数

有没有一种更好的方法来存储内存中的数据,而不是在类型脚本中使用数组和基于索引的函数?

基于泛型的类型脚本修改类型

两个名称不同的相同打字界面-如何使其干燥/避免重复?

TS不能自己推断函数返回类型

Typescript不允许在数组中使用联合类型

为什么我的 Typescript 函数中缺少 void 隐式返回类型?