在 React-Admin 中显示数组答案

【问题标题】：Showing an array in React-Admin在 React-Admin 中显示数组
【发布时间】：2021-03-13 20:20:19
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-admin dataprovider

【解决方案1】：

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

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

*请注意，您在type -> typeId 上面的 sn-p 上有错字。来源应严格匹配 API 属性名称。

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

【讨论】：