如何从自定义（非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

您可以在此 way 中设置 customRoute，传递您的自定义组件。

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

*编辑：

在您的情况下，让我们采用 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>)
        };

现在您应该可以访问/foo 网址上的页面了，因为它是在customRoutes 中注册的。

*编辑 2

如果您根本不想使用 react-admin 钩子，您可以只使用普通的 fetch，甚至可以使用 react-admin 的 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>)
};