如何从自定义(非crud，自定义数据)json中显示自定义页面

Question

我能够使用react admin 3.x(从2.x移植而来(和作为数据提供者的jsonServerProvider创建一个简单的管理面板。现在我想要一个显示一些自定义数据的自定义页面。

假设我有一个json，如下所示：

{
"title":"My custom page",
"teaser":"This is a custom page showing some stuff",
"drinks":[{"name":  "coke", "image": "coca-cola.jpg"}, {"name":  "beer", "image": "beer.png"}, {"name":  "coffee", "image":  "cappuccino.jpg"}],
"additional_stuff": ["some", "more", "stuff"]
}

我实际上创建了一个端点，称之为：/api/drinks/mycustom

注意，我已经有页面要列出、创建和编辑drinks。现在我只想要一个自定义页面以不同的方式显示它们(而不是在CRUD表中(，并显示额外的内容。

如果包括在现有端点名称中的端点名称是一个问题；mycustom"；不同路由中的端点。

我想在左边的默认菜单中有一个条目，当点击它时，react admin应该查询资源，并用来自端点的json数据填充页面。

我只是不知道如何制作这样一个自定义页面，在文档中没有找到合适的示例，这就是我来这里的原因。

感谢您提供如何实现这一目标的示例。

Answer 1

您可以通过这种方式设置一个传递自定义组件的customRoute。

要查询API，如果常规端点上提供的数据足以满足您的需求，则不需要新的端点。只需调用内部的useGetOne或useGetList挂钩取决于您的自定义页面显示的内容。

*编辑：

在您的情况下，让我们使用stats/foo.js组件，并假设您想要显示trades资源的另一个布局(根据您的意愿与任何其他资源交换(：

const Foo = () => {
const { data, ids, loading, error } = useGetList(
'trades',
{ page: 1, perPage: 10 },
{ field: 'id', order: 'DESC' }
);
if (loading) { return <Loading />; }
if (error) { return <p>ERROR</p>; }
return (
<Card>
<Title title="Trades Stats" />
<CardContent>
<ul>
{ids.map(id =>
<li key={id}>{data[id].title}</li>
)}
</ul>
</CardContent>
</Card>)
};

现在您应该能够访问/foourl上的页面，因为这就是它在customRoutes中注册的方式。

*编辑2

如果你根本不想使用react admin挂钩，你可以只做一个常规的fetch，甚至可以使用react admin's fetchUtils:

import { fetchUtils } from 'react-admin';
const fetchJson = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({ Accept: 'application/json' });
}
// add your own headers here
// options.headers.set('X-Custom-Header', 'foobar');
return fetchUtils.fetchJson(url, options);
}

并拨打以下电话：

const Foo = () => {
const [data, setData] = React.useState({});
React.useEffect(() => {
fetchJson(baseUrl + '/trades')
.then(response => {
return response.json;
})
.then(data => {
setData(data); 
});
}, []);

return (
<Card>
<Title title={data.title} />
<CardContent>
<div>{data.teaser}</div>
</CardContent>
</Card>)
};