如何解析字符串化的 JSON 字段并使用 react-admin 呈现结果

Posted 2023-03-08

【中文标题】如何解析字符串化的 JSON 字段并使用 react-admin 呈现结果

【英文标题】：How to parse a stringified JSON field and render results with react-admin

【发布时间】：2021-04-06 09:17:48

【问题描述】：

我正在使用带有 Amplify 的 react-admin。我的一个 graphql 类型有一个 AWSJSON 字段，其中包含一个 batchJob 的状态数组。我希望这个数组显示在数据网格中，用户可以展开该数据网格以查看批处理中每个项目的结果。

数据以字符串化 JSON 的形式从 API 返回。如何 JSON.parse 数据然后将其传递给 ArrayField 以由 Datagrid 在我的列表/显示组件中呈现？

该字段的内容如下所示：

["reference":"11134","status":"OK","reference":"10278","status":"OK"]

更新：下面的答案是在我将数据模型更新为：

["id": "somerandomuid", "clientReference":"11134","status":"OK"]

我的代码如下所示：

架构：

  type JobTask
  @model
  @auth(
    rules: [
       allow: owner 
       allow: groups, groups: ["admins"] 
    ]
  ) 
  id: ID!
  results: AWSJSON
  status: String
  expiryDate: AWSTimestamp! @ttl

显示组件：

  export const TaskShow = (props) => 
    return (
    <Show title=props.header ...props>
      <SimpleShowLayout>
        <Datagrid expand=<ResultsPanel />>
          <TextField
            key=cuid()
            fullWidth=true
            source="id"
            label="Batch Id"
          />
          <TextField
            key=cuid()
            fullWidth=true
            source="status"
            label="Status"
          />
        </Datagrid>
      </SimpleShowLayout>
    </Show>
    );

结果面板组件：

const ResultsPanel = (props) => 
  console.log(props)
  let resultsArray = JSON.parse(JSON.parse(props.record.results));
  console.log(resultsArray);
  return (
    <>
      resultsArray.map((result) => 
        return (
          <ArrayField>
            <Datagrid>
              <TextField source="reference" />
              <TextField source="status" />
            </Datagrid>
          </ArrayField>
        );
      )
    </>
  );
;

但我得到的只是：

【问题讨论】：

这里JSON.parse(JSON.parse(props.record.results))为什么要解析两次？

这是一个非常好的问题。由于某种原因，该字符串被双重字符串化。如果我只解析一次，类型还是字符串，map失败。

这很有趣。字符串值是'["reference":"11134","status":"OK","reference":"10278","status":"OK"]' 吗？如果解析它，我会得到一组对象。另外，你能分享TextField 组件吗？不确定它是否是库的一部分，但恐怕您确实只显示字段名称，而不是值。

这是值的控制台日志。但这并不是真正的问题。问题是如何将解析后的值“放入”react admin datagrid 组件中？

是的 - 昨晚解决了。源道具的问题是你是对的，它是一个字符串。我假设它被用作组件内函数的参数。在对列表上下文提供程序进行了很多处理之后，我得出结论，这也行不通。怀疑这是因为它需要存在于列表组件中，而不是显示组件中。

【参考方案1】：

我想我会将我的发现发布给其他可能正在为此苦苦挣扎的人。

Datagrid 需要一个上下文，列表组件将为它提供，但由于这是在一个显示组件中，我试图使用 Array 来提供上下文。

ArrayField 组件需要一个源属性，该属性必须是与 API 响应中的字段/属性完全映射的字符串；它不能是任意对象/数组。然而，字符串映射到的属性必须是一个数组，并且无法告诉组件在使用它之前处理该字段/属性的内容。所以 Arrayfield 作为上下文提供者出来了。

由于 Array 不适用于我的数据结构，我想我可以使用 RA 的 listcontextprovider，它没有很好的文档记录，但似乎允许您构建一个可由 datagrid 使用的上下文，只要我可以告诉。但是当我将它与正确的道具一起使用时，它总是给我一个错误（据我所知，无论如何 - 正如我所说，文档有点稀疏）。

最后，我放弃了原生 RA 组件，因为它不适合我的用例，而是编写了一个自定义字段组件来代替我需要的东西（即从记录中解析字段并将数组传递给数据网格渲染）。我使用了本机 MUI 数据网格，它的作用就像一个魅力：

const ResultsPanel = (props) => 
  let resultsArray = JSON.parse(JSON.parse(props.record.results));
  let columns = [
     field: "id", headerName: "Item Id", flex: 1 ,
     field: "clientReference", headerName: "Your Reference", flex: 1 ,
     field: "status", headerName: "Import Status", flex: 1 ,
  ];
  return (
    <div style= height: 400, width: "100%" >
      <DataGrid columns=columns rows=resultsArray />
    </div>
  );
;