javascript - 在 React-Admin 中显示一个数组

Question

我正在尝试使用 react-admin 创建一个电话簿应用程序。我创建了一个 dataProvider，我想同时显示 number 和 type，我应该怎么做？它没有在输出中显示任何 number 或 type。

数据提供者.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;

联系人.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>
  )
};

Answer 1

ReferenceArrayField 用于引用当前记录之外的表/集。因此，在呈现联系人本身时引用 联系人 并不是很明智，而且对于数据结构也不需要引用。

普通的 ArrayField 应该可以完成这项工作，因为记录的 numbers 字段已经是一个包含对象的数组 - 只需以这种方式迭代它们:

*请注意，上面代码段中的 type -> typeId 有错字。来源应严格匹配 API Prop 名称。

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