Javascript 在React Admin中显示数组

我正在尝试使用react admin创建电话簿应用程序。我创建了一个数据提供程序，我想同时显示

编号

和

类型

，我该如何操作？它不会在输出中显示任何

编号

或

类型

dataprovider.js

import fakeDataProvider from 'ra-data-fakerest';

const dataProvider = fakeDataProvider({
  contacts: [
    {
      id: 1,
      name: "jack",
      numbers: [
        {number: '09367371111', typeId: 1},
        {number: '36059988', typeId: 2},
      ],
    },
    {
      id: 2,
      name: "sara",
      numbers: [
        {number: '09365551111', typeId: 1},
      ],
    },
  ],
  typeCalls: [
    {id: 1, type: 'Mobile'},
    {id: 2, type: 'Home'},
    {id: 3, type: 'Work'},
    {id: 4, type: 'Other'},
  ],
});

export default dataProvider;

contacts.js

/// --- Show ---
export const ShowContact = (props) => {
  return (
    <Show {...props} actions={<ShowActionsOnTopToolbar/>} title={<ContactTitle/>}>
      <SimpleShowLayout>
        <TextField source="id"/>
        <TextField source="name"/>

        <ReferenceArrayField source="numbers" reference="contacts">
          <Datagrid>
            <TextField source="number"/>
            <TextField source="type"/>
          </Datagrid>
        </ReferenceArrayField>

      </SimpleShowLayout>
    </Show>
  )
};

//--Show---
导出常量ShowContact=（道具）=>{
返回(
)
};

ReferenceArrayField

用于引用当前记录之外的表/集。因此，在呈现联系人本身时引用

联系人

，实际上并不明智，但也不需要引用数据结构

普通的

ArrayField

应该可以完成这项工作，因为记录的

numbers

字段已经是一个包含对象的数组-只需按以下方式迭代它们：

*注意：上面的代码段在

type

->

typeId

上有一个打字错误。源应该严格匹配API属性名称

<ArrayField source="numbers">
  <Datagrid>
      <TextField source="number"/>
      <TextField source="typeId"/>
  </Datagrid>
</ArrayField>