Error: async/await is not yet supported in Client Components in next.js

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

在 [id] page.tsx 中，

"use client"

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>
  )
}

错误 'Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server.' appears.

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

'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 的操作呢

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

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

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

当我尝试对整个页面应用'user client'时，我曾经遇到过同样的错误。

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

export default function PipelineDesignerEditorPage

代替：

export default async function PipelineDesignerEditorPage