将 Datagrid 组件与自定义查询一起使用 - react-admin

Question

在将 Datagrid 组件与自定义查询一起使用时收到以下错误。下面的代码适用于 react-admin ver 3.3.1，而不适用于 ver 3.8.1

TypeError: 无法读取未定义的属性 'includes'

浏览器的控制台信息：列表组件必须在中使用。依靠道具而不是上下文来获取列表数据和回调已被弃用，并且在下一个主要版本的 react-admin 中将不被支持。

参考：https://marmelab.com/react-admin/List.html #Tip：您可以将 Datagrid 组件与自定义查询一起使用：

import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading } from 'react-admin'

const CustomList = () => {
    const [page, setPage] = useState(1);
    const perPage = 50;
    const { data, total, loading, error } = useQuery({
        type: 'GET_LIST',
        resource: 'posts',
        payload: {
            pagination: { page, perPage },
            sort: { field: 'id', order: 'ASC' },
            filter: {},
        }
    });

    if (loading) {
        return <Loading />
    }
    if (error) {
        return <p>ERROR: {error}</p>
    }
    return (
        <>
            <Datagrid
                data={keyBy(data, 'id')}
                ids={data.map(({ id }) => id)}
                currentSort={{ field: 'id', order: 'ASC' }}
                basePath="/posts" // required only if you set use "rowClick"
                rowClick="edit"
            >
                <TextField source="id" />
                <TextField source="name" />
            </Datagrid>
            <Pagination
                page={page}
                perPage={perPage}
                setPage={setPage}
                total={total}
            />
        </>
    )
} ```

Please help!

Answer 1

从 react-admin 3.7 开始，<Datagrid> 和 <Pagination> 从 ListContext 读取数据，而不是期望数据被 props 注入。例如，请参阅更新后的 <Datagrid> 文档 https://marmelab.com/react-admin/List.html#the-datagrid-component。

如果您将代码包装在 <ListContextProvider>:

中，您的代码将有效

import React, { useState } from 'react';
import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin'

export const CustomList = () => {
    const [page, setPage] = useState(1);
    const perPage = 50;
    const { data, total, loading, error } = useQuery({
        type: 'GET_LIST',
        resource: 'posts',
        payload: {
            pagination: { page, perPage },
            sort: { field: 'id', order: 'ASC' },
            filter: {},
        }
    });

    if (loading) {
        return <Loading />
    }
    if (error) {
        return <p>ERROR: {error}</p>
    }
    return (
        <ListContextProvider value={{
                data: keyBy(data, 'id'),
                ids: data.map(({ id }) => id),
                total,
                page,
                perPage,
                setPage,
                currentSort: { field: 'id', order: 'ASC' },
                basePath: "/posts",
                resource: 'posts',
                selectedIds: []
        }}>
            <Datagrid rowClick="edit">
                <TextField source="id" />
                <TextField source="name" />
            </Datagrid>
            <Pagination />
        </ListContextProvider >
    )
}

Answer 2

<ReferenceManyField>，以及其他 relationship-related 组件，也实现了一个 ListContext。这意味着您可以在该组件内使用 <Datagrid> 或 <Pagination>。

https://marmelab.com/react-admin/List.html#uselistcontext

您的代码应如下所示：

import React, { useState } from 'react';
import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin'

export const CustomList = () => {
   
    return (
       <ReferenceManyField reference="Your resource for pull the data" target="linked field">
            <Datagrid rowClick="edit">
                <TextField source="id" />
                <TextField source="name" />
            </Datagrid>
        </ReferenceManyField>
    )
}

将 Datagrid 组件与自定义查询一起使用 - react-admin

Use the Datagrid component with custom queries - react-admin

react-admin