错误：next.js 中的客户端组件尚不支持 async/await

Question

我在“next”上使用 next.js：“13.4.19”。项目结构是--app --layout.tsx --page.tsx --[id] --page.tsx

在 [id] page.tsx 中，

“使用客户端”

import { Editor } from '@/components/editor';
import { useState, useRef, useEffect, useMemo } from 'react'

export default async function PipelineDesignerEditorPage(
  { params }: { params: { pipelineId: string } }
) {
  console.log('params.pipelineId',params.pipelineId);

  const [loding, setLoding] = useState(false);
  const [pipelineData, setPipelineData] = useState({});

  useEffect(() => {
    setLoding(true);
    let data = getPipeline(params.pipelineId);
    setPipelineData(data);
    setLoding(false);
  }, []);

  return (
    <div style={{ width: '100%', height: `calc(100vh - 65px)` }}>
      <Editor pipeline={pipeline} />
    </div>
  )
}

错误“错误：客户端组件尚不支持异步/等待，仅服务器组件支持。” 此错误通常是由于意外添加'use client'到最初为服务器编写的模块而引起的。出现。

我发现这个页面是在服务器端渲染的，所以我修改了一下

'user client'
import { Editor } from '@/components/editor';
import { getPipeline } from '@/lib/pipelines/storage';
import { useState, useRef, useEffect, useMemo } from 'react'

export default async function PipelineDesignerEditorPage(
  { params }: { params: { pipelineId: string } }
) {
  console.log('params.pipelineId',params.pipelineId);
  const pipeline = await getPipeline(params.pipelineId);
  
  const [loding, setLoding] = useState(false);
  useEffect(() => {
    console.log('useEffect');
    setLoding(true);
  }, []);

  return (
    <div style={{ width: '100%', height: `calc(100vh - 65px)` }}>
      <Editor pipeline={pipeline} />
    </div>
  )
}

除非 useEffect 和 useState 被删除，否则它仍然不起作用。

这是否意味着我不能在 app->[id]->page.tsx 中使用 useState 和 useEffect，点击、加载需要使用 useState 和 useEffect 的操作呢

Answer 1

当我尝试对整个页面应用“用户客户端”时，我曾经遇到过同样的错误。

我的解决方案是删除async关键字。在这种情况下，使用：

export default function PipelineDesignerEditorPage

代替：

export default async function PipelineDesignerEditorPage

Answer 2

您正在混合客户端和服务器组件。正如错误所述， async/await 仅在服务器组件中受支持（没有"use client"）。但是，正如您所提到的，useStateand useEffect（或单击等事件）等......仅在客户端组件中受支持。

解决方案是将 2 分成 2 个不同的组件。通常，这page.tsx将是一个服务器组件，您可以在其中获取数据并将这些数据作为参数传递给子客户端组件，如果需要，您可以在其中获取状态和事件。

具体而言，您可能应该在Editor或 中查看状态和效果Suspense。请参阅https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example下的示例