如何在 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 类型请求所有链接到当前wallet
的movements
。
【讨论】:
以上是关于如何在 react-admin 的 show 选项中列出来自另一个端点的数据?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React Typescript 应用程序中导入 react-admin?
在 react-admin 中成功认证后如何重定向到其他路由