错误：只有普通对象和一些内置函数可以从服务器组件传递到客户端组件。不支持类或空原型

Question

我创建了一个简单的 React 应用程序来从 api 获取数据。基本上它应该只显示 api 给出的材质名称。当我在浏览器中调用 api 时，它正确显示 JSON 数据。 现在，当我重新加载前端页面时，会显示以下错误消息： 错误：只有普通对象和一些内置对象可以从服务器组件传递到客户端组件。不支持类或空原型。 在字符串化（） 在字符串化（）

我创建了一个名为“Material API”的文件。这里从 API 获取数据。

import axios, { AxiosResponse } from "axios";
import { Material } from "../model/Material";
import { toast } from "sonner";

import { QueryData } from "@/app/model/QueryData";
import error from "next/error";

const fetchMaterial = () => {
  return axios
    .get<Material[]>("http://127.0.0.1:8000/show-data/")
    .catch((e) => {
      console.error(e);
      toast.error("Error getting material");
      throw error;
    });
};

export const getMaterial = (): QueryData<Material[]> => ({
  queryKey: ["material"],
  queryFn: async () => {
    const response = await fetchMaterial();
    return response.data;
  },
});

组件“MaterialList”将显示我从 API 获取的数据。

"use client"

import { getMaterial } from "../api/MaterialApi";
import { useQuery } from "@tanstack/react-query";
import { Box, Skeleton, Typography } from "@mui/material";

interface MaterialListProps {}

export const MaterialList: React.FC<MaterialListProps> = () => {
  const { isLoading, data } = useQuery({
    ...getMaterial(),
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });

  return (
    <Box>
      {isLoading ? (
        <Skeleton sx={{ width: "100%" }} />
      ) : (
        <ul>
          {data?.map((material) => (
            <li key={material.id}>
              <Typography>{material.name}</Typography>
            </li>
          ))}
        </ul>
      )}
    </Box>
  );
};

我希望有人能帮助我解决这个问题。

尝试使用异步方法，但仍然遇到相同的错误。

Answer 1

尝试在 MaterialApi 文件顶部添加“使用客户端”：

"use client"

import axios, { AxiosResponse } from "axios";
import { Material } from "../model/Material";
import { toast } from "sonner";

import { QueryData } from "@/app/model/QueryData";
import error from "next/error";

const fetchMaterial = () => {
  return axios
    .get<Material[]>("http://127.0.0.1:8000/show-data/")
    .catch((e) => {
      console.error(e);
      toast.error("Error getting material");
      throw error;
    });
};

export const getMaterial = (): QueryData<Material[]> => ({
  queryKey: ["material"],
  queryFn: async () => {
    const response = await fetchMaterial();
    return response.data;
  },
});

从文件导出的函数

getMaterial

被视为服务器端函数，当您将其导入客户端组件时，会出现提供的错误。