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

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

数据作为字符串化JSON从API返回。如何解析数据，然后将其传递到ArrayField，由Datagrid在列表/显示组件中呈现

该字段的内容如下所示：

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

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

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

我的代码如下所示：

[{"reference":"11134","status":"OK"},{"reference":"10278","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>
        );
      })}
    </>
  );
};

export const TaskShow=（道具）=>{
返回(
);

结果面板组件：

  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>
        );
      })}
    </>
  );
};

const ResultsPanel=（道具）=>{
控制台日志（道具）
让resultsArray=JSON.parse（JSON.parse（props.record.results））；
console.log（resultsArray）；
返回(
{resultsArray.map（（结果）=>{
返回(
我想我会把我的发现发布给任何可能正在为此而挣扎的人

Datagrid需要一个上下文，列表组件将为其提供上下文，但由于这是在show组件中，所以我尝试使用Array来提供上下文

ArrayField组件需要一个源属性，该属性必须是一个字符串，该字符串必须精确映射到API响应中的字段/属性；它不能是任意对象/数组。但是，字符串映射到的属性必须是数组，并且在使用它之前无法告诉组件处理该字段/属性的内容。因此ArrayField是t作为上下文提供者

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

最后，我放弃了本机RA组件，认为它不适合我的用例，转而编写了一个自定义字段组件来满足我的需要（即，从记录中解析字段并将数组传递给datagrid进行渲染）。我使用了本机MUI datagrid，它的工作方式很有魅力：

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>
  );
};

const ResultsPanel=（道具）=>{
让resultsArray=JSON.parse（JSON.parse（props.record.results））；
让列=[
{字段：“id”，标题名：“Item id”，flex:1}，
{field:“clientReference”，headerName:“Your Reference”，flex:1}，
{字段：“状态”，标题名：“导入状态”，flex:1}，
];
返回(
);
};
为什么要在这里解析两次
JSON.parse（JSON.parse（props.record.results））
？这是一个很好的问题。出于某种原因，字符串是双重字符串化的。如果我只解析一次，类型仍然是字符串，映射失败。这很有趣。字符串值是
”[{“引用”：“11134”，“状态”：“OK”}，{“引用”：“10278”，“状态”：“确定”}]“
？如果解析它，我会得到一个对象数组。另外，你能共享
TextField
组件吗？不确定它是否是库的一部分，但我担心你实际上只显示字段名，而不是值。这是值的控制台日志。但这不是真正的问题。问题是如何获得该PAR将值“转换为”react admin datagrid component？是的-昨晚解决了这个问题。源属性的问题是您“\r\n它是一个字符串。我假设它被用作组件内部函数的参数。在与list contextprovider进行了大量的混淆之后，我得出结论，这也不起作用。怀疑这是因为它需要生活在列表组件中，而不是显示组件中。