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

问题描述

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

TypeError：：无法读取未定义的属性“ includes”

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

参考：https://marmelab.com/react-admin/List.html ＃提示：您可以将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!

解决方法

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

如果将代码包装在<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),page,perPage,setPage,currentSort: { field: 'id',basePath: "/posts",selectedIds: []
        }}>
            <Datagrid rowClick="edit">
                <TextField source="id" />
                <TextField source="name" />
            </Datagrid>
            <Pagination />
        </ListContextProvider >
    )
}