Блог

Я пытаюсь создать приложение телефонной книги с помощью react-admin. Я создал dataProvider и хочу отобразить number и type вместе, как мне это сделать? Он не показывает мне никаких number or 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>
  )
};
 

ReferenceArrayField используется для ссылки на таблицу / набор вне текущей записи. Следовательно, ссылаться на contacts при отображении самих контактов не очень разумно, но также не требуется никаких ссылок на структуру ваших данных.

Равнина ArrayField должна выполнять эту работу, поскольку поле записи numbers уже является массивом с объектами — просто повторите их таким образом:

* Обратите внимание, что у вас есть опечатка во фрагменте выше на type -> typeId . Исходные тексты должны строго соответствовать именам реквизитов API.

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