问题描述
我有点沉迷于使用 react-admin 的项目,我应该执行以下操作....
在 App.js
中,我们有一个资源 products
。现在我应该添加另一个资源 Manufacturers
,专门针对一个制造商,例如Example Manufacturer
。
App.js
<Resource name="products" list={ProductsList} show={ProductsEdit} />
<Resource name="manufacturers/ExampleManufacturer/products" list={ManufacturerProductsList} />
因此,当我点击 Resource
时,它会打开 ManufacturerProductsList
并通过 getList
从 API 中获取。数据具有以下格式(基本上)
data = [{id: '2020-01',count: 1},{id: '2020-02',count: 5}]
所以每个月它都会显示一个计数。现在,当我单击一行时,我希望它显示所选月份的列表!从该列表中,我希望能够选择项目并使用操作、过滤器或打开产品。这是我遇到问题的地方。
我不知道如何将数据传递给不以某种错误结尾的列表。
我试图写一个 Customroute
、useListContext
、RessourceContextProvider
等等......
我最近(也是最有希望的)尝试如下。
const { loading,total,data,error } = useQuery({
type: 'getList',resource: 'manufacturers/ExampleManufacturer/products/2021-02',payload: {
pagination: { page: 1,perPage: 10 },sort: { field: 'id',order: 'ASC' },filter: {}
}
});
if (loading) return <Loading />
if (error) return <p>Error: {error}</p>
return (
<ResourceContextProvider value="manufacturers">
<ListContextProvider value={{
basePath: '/manufacturers',data: keyBy(data,'id'),ids: data.map(({ id }) => id),currentSort: { field: 'id',selectedIds: []
}}>
<Datagrid rowClick="show">
<TextField source="id" />
<TextField source="type" />
</Datagrid>
<Pagination
page={1}
perPage={50}
setPage={(numb) => console.log(numb)}
total={total}
/>
</ListContextProvider>
</ResourceContextProvider>
);
Datagrid.js:79 Uncaught TypeError: Cannot read property 'field' of undefined
at Datagrid.js:79
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnkNownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performunitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at scheduleUpdateOnFiber (react-dom.development.js:21199)
at dispatchAction (react-dom.development.js:15660)
at hooks.js:13
at useQuery.js:126
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)