如何在 react-admin 的 show 选项中列出来自另一个端点的数据?

Posted

技术标签:

【中文标题】如何在 react-admin 的 show 选项中列出来自另一个端点的数据?【英文标题】:How can I list data from another endpoint inside show option in react-admin? 【发布时间】:2019-03-26 15:11:09 【问题描述】:

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-server 的自定义数据提供程序:

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】:

首先,关于您的dataProvider,如[文档(https://marmelab.com/react-admin/DataProviders.html#response-format) 中所述,您必须返回一个带有data 键的对象,其中包含您的API 响应。这将解决您看到的错误。

其次,关于在显示视图中包含相关数据的列表,您应该在选项卡中使用ReferenceManyField。它将使用GET_MANY_REFERENCE fetch 类型请求所有链接到当前walletmovements

【讨论】:

以上是关于如何在 react-admin 的 show 选项中列出来自另一个端点的数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Typescript 应用程序中导入 react-admin?

在 react-admin 中成功认证后如何重定向到其他路由

react-admin - 如何根据另一个设置输入值

如何解析字符串化的 JSON 字段并使用 react-admin 呈现结果

如何将 Auth0 与 react-admin 一起使用?

React-admin - 如果未经身份验证,我如何强制 Dasbhoard 要求登录