如何解决将Datagrid组件与自定义查询一起使用-react-admin
在将Datagrid组件与自定义查询一起使用时,收到以下错误。以下代码适用于 react-admin 版本3.3.1,而不适用于版本3.8.1
TypeError::无法读取未定义的属性“ includes”
浏览器的控制台信息:列表组件必须在
参考: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 >
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。