React-Admin TypeError：无法访问属性“名称”，record.section 未定义

Question

嘿伙计们提前谢谢！我在

[email protected]

中使用

[email protected]

。我的

src/app/admin/App.tsx

看起来像这样：

// src/app/admin/App.tsx

const dataProvider = simpleRestProvider("/api");

const App = () => {
  return (
    <Admin dataProvider={dataProvider}>
      {/* ... */}
      <Resource
        name="units"
        list={UnitList}
        create={UnitCreate}
        edit={UnitEdit}
        recordRepresentation={(record) => `${record.section.name} - ${record.name}`}
      />
      {/* ... */}
    </Admin>
  );
};

它将前往

src/app/api/(admin)/units/route.ts

// src/app/api/(admin)/units/route.ts

import { auth } from "@/auth";
import { db } from "@/db";
import { units } from "@/db/schema";
import { asc } from "drizzle-orm";
import { NextResponse } from "next/server";

export const GET = async () => {
  const session = await auth();

  if (!session) {
    return new NextResponse("Unauthorized", { status: 401 }); // User not signed in
  }
  if (!session.user || session.user.role !== "admin") {
    return new NextResponse("Forbidden", { status: 403 }); // User signed in but not admin
  }

  const data = await db.query.units.findMany({
    orderBy: [asc(units.order)],
    with: { section: true },
  });

  const totalCount = data.length;

  const headers = new Headers();
  headers.set("Access-Control-Allow-Origin", "*");
  headers.set(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS",
  );
  headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization");
  headers.set("Access-Control-Expose-Headers", "Content-Range");
  headers.set("Content-Range", `units 0-${totalCount}/${totalCount}`);

  return NextResponse.json(data, { headers });
};

export const POST = async (req: Request) => {
  const session = await auth();

  if (!session) {
    return new NextResponse("Unauthorized", { status: 401 }); // User not signed in
  }
  if (!session.user || session.user.role !== "admin") {
    return new NextResponse("Forbidden", { status: 403 }); // User signed in but not admin
  }

  const body = await req.json();
  console.log(body);

  const data = await db
    .insert(units)
    .values({
      ...body,
    })
    .returning();

  return NextResponse.json(data[0]);
};

这是从此路由返回的对象的类型：

const data: {
    name: string;
    order: number;
    id: number;
    description: string;
    sectionId: number;
    section: {
        name: string;
        id: number;
        description: string;
        courseId: number;
    };
}[]

当我使用反应管理创建功能创建记录时收到错误，如果刷新页面，错误就会消失。奇怪的是，如果我将记录表示设置为

recordRepresentation="name"

就没有错误。这可能意味着仅当我将 recordrepresentation 设置为嵌套对象时才会出现错误。

我做错了什么吗？

我尝试阅读react-admin文档，但什么也没找到。

还尝试为

section.name

添加隐藏字段

UnitList.tsx

我以为它会引用它，但它没有做任何事情：

import {
  Datagrid,
  List,
  NumberField,
  ReferenceField,
  TextField,
} from "react-admin";

export const UnitList = () => (
  <List filter={{ order: true }}>
    <Datagrid>
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="description" />
      <NumberField source="order" />
      <ReferenceField source="sectionId" reference="sections" />
      <TextField source="section.name" label={false} hidden /> // <- this line
    </Datagrid>
  </List>
);

Answer 1

我想通了。问题是当react-admin创建一个资源时，它会向我的情况下的

POST

发送一个

api/<resource>

请求

api/(admin)/units

并且它会期望你返回刚刚创建的对象，这是我在我的api路由中所做的：

// ...

export const POST = async (req: Request) => {
  // ...

  const body = await req.json();
  console.log(body);

  const data = await db
    .insert(units)
    .values({
      ...body,
    })
    .returning();

  return NextResponse.json(data[0]);
};

问题是

data[0]

没有

sections

属性，我的

App.tsx

用作我的单位资源的

recordRepresentation

// src/app/admin/App.tsx

const dataProvider = simpleRestProvider("/api");

const App = () => {
  return (
    <Admin dataProvider={dataProvider}>
      {/* ... */}
      <Resource
        name="units"
        list={UnitList}
        create={UnitCreate}
        edit={UnitEdit}
        recordRepresentation={(record) => `${record.section.name} - ${record.name}`}
      />
      {/* ... */}
    </Admin>
  );
};

为了解决这个问题，我使用从

id

对象返回的

data[0]

查询数据。

// ...

export const POST = async (req: Request) => {
  // ...

  const body = await req.json();
  console.log(body);

  const data = await db
    .insert(units)
    .values({
      ...body,
    })
    .returning();

  const dataWithSection = await db.query.units.findFirst({
    where: eq(units.id, data[0].id),
    with: { section: true },
  });

  return NextResponse.json(dataWithSection);
};

请注意，我正在进行另一个数据库调用，因此效率低下，但它有效。也许有人知道如何用 drizzle 或 postgres 来优化它，请教我，谢谢。