如何从自定义（非 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 table 中）并显示额外的东西。

如果现有端点中包含的端点名称有问题，我可以将“mycustom”端点放在不同的路由中。

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

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

感谢您提供有关如何实现此目的的示例。

Answer 1

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

要查询 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 url 上的页面，因为这是在 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>)
};

如何从自定义（非 crud，自定义数据）显示自定义页面 json

How to display a custom page from a custom (non crud, custom data) json

reactjs

react-admin