Как я могу перечислить данные из другой конечной точки внутри опции показа в реакции-администратора? - PullRequest
Новая
       13

Как я могу перечислить данные из другой конечной точки внутри опции показа в реакции-администратора?

0 голосов
/ 22 октября 2018

React-Admin версия: 2.4.0

У меня есть список с информацией о кошельках, которые я могу перечислить с помощью этой конечной точки: 

http://myHost:8080/api/v1/private/wallets

СейчасЯ хочу показать данные о движениях каждого кошелька, когда я нажимаю на кошелек в списке.

Итак, для получения данных о движениях кошелька мне нужно вызвать другую конечную точку, отправив команду getс этим форматом: 

${apiUrl}/${resource}/${params.id}/movements

Например: 

http://myHost:8080/api/v1/private/wallets/cd496094-a77a-4e4e-bcd9-3361ff89294a/movements

Эта конечная точка возвращает мне такой объект: 

{
   "_embedded": {
       "movements": [
           {
               "id": "ftr4e2e5-a2bf-49f7-9206-3e2deff3a456",
               "amount": 10,
               "status": "PENDING"
           },
           {
               "id": "67732ad9-233e-42be-8079-11efe4d158yt",
               "amount": 2.56,
               "status": "SUCCESS"
           }
       ]
   }
}

У меня есть этот код: 

//IMPORTS
export const WalletList = props => (
  <List {...props}>
    <Datagrid rowClick="show">
      <TextField source="id" label="Wallet ID" />
      <TextField source="iban" label="IBAN" />
    </Datagrid>
  </List>
);

export const WalletShow = props => (
  <Show {...props}>
    <TabbedShowLayout>
      <Tab label="Wallet">
        <TextField label="Wallet ID" source="id" />
      </Tab>
      <Tab label="Movements">
        <TextField label="Movement ID" source="id" />
      </Tab>
    </TabbedShowLayout>
  </Show>
);

У меня есть пользовательский поставщик данных, основанный на json-сервере для этой конечной точки: 

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {

  const convertDataRequestToHTTP = (type, resource, params) => {
    let url = '';
    const options = {};
    switch (type) {
      case GET_LIST: {
        //...
      }
      case GET_ONE:
         // custom call for movements: /api/v1/private/wallets/{walletId}/movements
        if (resource === 'wallets') {
          url = `${apiUrl}/${resource}/${params.id}/movements`;
          break;
        }
        url = `${apiUrl}/${resource}/${params.id}`;
        break;
      case GET_MANY_REFERENCE:
        //...
      case UPDATE:
        //...
      case CREATE:
        //...
      case DELETE:
        //...
      default:
        throw new Error(`Unsupported fetch action type ${type}`);
    }
    return { url, options };
  };
  //...
}

И моя ошибка: 

The response to 'GET_ONE' must be like { data: { id: 123, ... } }, but the received data does not have an 'id' key. The dataProvider is probably wrong for 'GET_ONE'

Как я могу перечислить внутрикомпонент шоу?

1 Ответ

0 голосов
/ 23 октября 2018

Во-первых, о вашем dataProvider, как объясняется в [документации (https://marmelab.com/react-admin/DataProviders.html#response-format),), вы должны вернуть объект с ключом data, содержащим ваш ответ API. Это исправит ошибку, которую вы видите.

Во-вторых, для того, чтобы иметь список связанных данных внутри представления представления, вы должны использовать ReferenceManyField внутри вашей вкладки. Он запросит все movements, связанные с текущим wallet используя GET_MANY_REFERENCE тип выборки.

...