如何在react admin中使用异步获取的参数筛选列表

Question

我正试图在react admin中过滤一个列表。

基本上，我有一个班级列表，我想按teacherId过滤。但是，teacherId必须异步获取。

代码如下：

const activitiesFilters = [
<TextInput key="search" source="q" label="Search an Activity" alwaysOn />,
]
export const ActivityList = (props) => {
const teacher = useCurrentTeacherProfile() // This is the asynchronous call
return (
<List
filters={activitiesFilters}
filter={{ authorId: teacher?.id }} // Here I am using the teacher ID to filter my list
{...props}
exporter={false}
>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="title" />
<TextField source="location" />
<DateField source="dateTime" />
</Datagrid>
</List>
)
}

上面的代码给了我这个错误：

Error: ActivityList suspended while rendering, but no fallback UI was specified. Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.

我尝试在<List />之上添加一个<Suspense />组件，但它不起作用。

如果我在根目录添加<Suspense />组件，在<Admin />组件之上，它会破坏导航。

有没有一种方法可以用异步获取的参数来过滤我的列表？

谢谢！

Answer 1

我想知道错误是否不是来自"quot；"中的typescript运算符；教师id"；在异步调用解析之前，在JS中解析为undefined。

所以我会按照以下方式解析代码：

import { Loading } from 'react-admin';
const activitiesFilters = [
<TextInput key="search" source="q" label="Search an Activity" alwaysOn />,
]
export const ActivityList = (props) => {
const teacher = useCurrentTeacherProfile() // This is the asynchronous call
if (!teacher) return <Loading/>
return (
<List
filters={activitiesFilters}
filter={{ authorId: teacher?.id }} // Here I am using the teacher ID to filter my list
{...props}
exporter={false}
>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="title" />
<TextField source="location" />
<DateField source="dateTime" />
</Datagrid>
</List>
)
}