在“使用客户端”nextjs 组件中使用异步

Question

我遇到了一个奇怪的行为，NextJs 允许我在文件顶部包含“use client”指令，同时仍然允许我使用异步声明组件，如下所示：

'use client';

import React, { useState } from 'react';

const TestComponent = async () => {
  const [randomNumber, setRandomNumber] = useState(null);

  return (
      <div>
        <div> {randomNumber} </div>
        <button onClick={() => setRandomNumber(Math.random())}>Set state</button>
      </div>
  );
};

export default TestComponent;

我本希望这会引发运行时错误并使我的应用程序崩溃，因为我将“使用客户端”与异步组件混合在一起，正如建议的那样here。

但是我得到的只是控制台警告，而我的组件仍然运行良好。奇怪的是，它的行为有点像服务器组件，因为每当我运行

loading

时都会显示

setRandomNumber

组件，几乎就像它从服务器组件获取数据一样（我按照建议将加载组件声明为顶级组件）由 nextJS 文档提供）。我的所有 console.log 都在客户端控制台中输出（即在浏览器上）。

这是一些新功能，如果您将“使用客户端”与异步组件混合使用，您的应用程序不会中断吗？

我的加载组件：

const Loading = () => {
  return <p>Loading...</p>;
};

export default Loading;

我的项目结构：

test-app/src/app
├── test
│   └── page.js # my TestComponent page
├── page.js # just the default NextJS index page
├── loading.js # my custom top-level loading page
└── layout.js # the default layout

更新

所以我对此进行了更多调查。我发现我的顶级

loading

组件正在阻止常见的：“异步组件内不支持钩子”错误的出现（尽管我确实收到了控制台警告）。有趣的是，当我删除顶级

loading

组件时，当我单击“设置状态”按钮时，错误确实会在运行时正常显示（即错误占据整个页面）。但是，如果我在项目中包含顶级

loading

组件，则页面将仅显示组件中定义的“正在加载”消息，并且应用程序将正常工作。

我在一个完全干净的 NextJs 项目上测试了这个，只有上面的

TestComponent

和顶级

loading

组件，我仍然得到相同的行为。我还能够成功构建项目，并且应用程序仍然可以正常运行（尽管在项目构建时我再次收到警告）。

这是预期的行为吗？也许事情就是这样？在一组情况下抛出错误感觉有点令人困惑，但随后它允许项目在其他某些情况下运行，例如如果您包含

loading

组件。

Answer 1

Hej，你找到那里发生的事情的答案了吗？ 目前，我有一项任务将整个应用程序重构为应用程序路由器，昨天我花了一整天的时间只是为了弄清楚发生了什么，但我确实不知道。事实上，我今天比昨天更无知了。

例如 - 在“使用客户端”页面中不允许异步，但是我应该如何执行一些基本功能假设用户提供一些输入来触发一个函数，该函数接受该输入值，发送到数据库并检索一些数据库中的数据必须保存在 useState 中并显示在页面上。

为了使整个事情更加混乱（类似于您的情况），似乎我可以在顶级页面（页面路由器中的索引页面）上使用异步，尽管它是“使用客户端”页面并且尽管它使用钩子......

最让我困惑的也许是人们根本不谈论这个，这让我认为这只是我的问题，我错过了一些明显的事情。