接下来 JS 将 Prop 从服务器组件传递到客户端组件

Question

我正在尝试将道具从服务器组件传递到客户端组件。该错误仅发生在构建期间。

它产生的错误是 类型错误：页面“src/app/chat/Agents/page.tsx”具有无效的“默认”导出： 输入“{ data: any; }”无效。

但是编译的时候没有报错，运行很顺利

服务器组件

import React, { Suspense } from "react";
import frontEndAxiosInstance from "@/lib/frontendaxiosInstance";
import AgentsPage from "./Agents/page";

async function CreateKnowledge() {
  try {
    const response = await frontEndAxiosInstance.post("/knowledge");
    const knowledge = response.data.message;
    if (knowledge) {
      const { id: knowledgeId } = knowledge;
      return knowledgeId;
    }
    return null;
  } catch (error) {
    console.log(error);
  }
}

async function CreateDocument(knowledgeId: string) {
  try {
    const response = await frontEndAxiosInstance.post(
      `knowledge/${knowledgeId}/documents`
    );
    const document = response.data.data;
    if (document) {
      const { id: documentId } = document;
      return documentId;
    }
    return null;
  } catch (error) {
    console.log(error);
  }
}

const Page = async () => {
  const knowledgeId = await CreateKnowledge();
  let documentId = null;

  if (knowledgeId) {
    documentId = await CreateDocument(knowledgeId);
  }

  // If knowledgeId or documentId is missing, render an error state
  if (!knowledgeId || !documentId) {
    return <p>Error creating knowledge or document.</p>;
  }

  const data = JSON.parse(
    JSON.stringify({
      knowledgeId: knowledgeId,
      documentId: documentId,
    })
  );

  return (
    <div>
      <p>KnowledgeId: {knowledgeId}</p>
      <p>DocumentId: {documentId}</p>
      {/* Use Suspense for client-side component */}
      <Suspense fallback={<p>Loading agent...</p>}>
        <AgentsPage data={data} />
      </Suspense>
    </div>
  );
};

export default Page;

我的客户端组件

"use client";

import { useState, useEffect } from "react";
import frontEndAxiosInstance from "@/app/lib/frontendaxiosInstance";

const AgentsPage = ({ data }: { data: any }) => {
  const [first, setfirst] = useState("test");
  return (
    <div id="status">
      <h4>hello</h4>
    </div>
  );
};

export default AgentsPage;

请指教，谢谢

Answer 1

在 Next.js 项目中

/components

文件夹位于 Next 项目文件夹之外。这就是为什么它不允许默认导出。您应该只使用页面的默认导出。

export AgentsPage;