如何使用自定义 JSON 数据创建列表

Question

我有来自 Firestore 数据库的数据。我使用来自 Firestore 的测试集合创建了多个资源，效果非常好。我现在遇到的问题是，我有一个包含一个文档的集合，并且该文档的集合之一有一个包含大量 json 数据的字段，因此结构将如下所示：

[
    {
        "id": "rj2PK96j3MashOA1AVFh",
        "timestamp": "2023-11-15T15:26:18.628Z",
        "snapshot": "{\"guests\": [{\"id\":\"41090\",\"id_transaction\":\"41755\",\"id_people\":\"33100\",\"status\":\"checkin\",\"paid_days_in_advance_to_partner\":\"2\",\"nights_to_pay\":\"13\",\"id_bed\":\"87\",\"id_key\":\"88\",\"room_type_id\":\"1\",\"original_checkout_plan\":\"2023-10-02\",\"checkout_plan\":\"2023-10-13\",\"checkout_confirmed\":{}}}",
        "updated": "2023-11-02T15:39:48.536Z",
        "domain": "testing"
    }
]

使用 List/Datagrid/TextField 组件的常规结构，我可以访问所有值，包括 RA 列表中显示的字符串化 json。但我希望“快照”字段能够渲染每个 json 键而不丢失功能。我尝试了许多不同的方法，下面是我获取整个数据的最新方法，然后获取快照 json 字符串，解析为 json，然后尝试映射每个“来宾”并尝试使用 TextField 组件渲染其数据，并且它在我的屏幕上没有呈现任何内容。 （见图）。但我可以访问控制台中的所有数据。

const SnapshotList = () => {
  const { data, resource } = useListContext();
  const snapshotString = data[0].snapshot;

  try {
    const snapshotJson = JSON.parse(snapshotString);
    const todaysGuests = snapshotJson.assign_today.guests;

    // Log todaysGuests to the console
    console.log("Todays Guests:", todaysGuests);

    return (
      <Datagrid>
        {todaysGuests.map((guest: any, index: any) => (
          <React.Fragment key={index}>
            <TextField
              label="Arrival Date"
              source={`${guest}.arrival_date`}
            />
            <TextField
              label="Reservation Code"
              source={`${guest}.reservation_code`}
            />
            <TextField
              label="Given Name"
              source={`${guest}.given_name`}
            />
          </React.Fragment>
        ))}
      </Datagrid>
    );
  } catch (error) {
    console.error("Error parsing JSON:", error);
    return null; // or handle this case according to your requirements
  }
};

export const Snapshots = () => (
  <ResourceContextProvider value="snapshots">
    <List pagination={<Pagination perPage={1000} rowsPerPageOptions={[]} />}>
      <SnapshotList />
    </List>
  </ResourceContextProvider>
);

有人知道如何使用 TextField 向其传递自定义资源来生成数据网格吗？

Answer 1

在您的实现中，您将密钥传递给 Datagrid 以检索字段：source={

${guest}.arrival_date

}， 但您不传递记录数组本身 -

data

。

您需要合并

data

记录的原始数组和

todaysGuests

中的数据，并在 Datagrid 中传递新数组。

使用外部数据源的 Datagrid 实现示例 - “独立使用”。