如何使用异步获取的参数过滤 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

我想知道错误是否来自“？”。 “teacher?.id”中的打字稿运算符在您的异步调用解析之前在 JS 中解析为未定义。

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

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>
  )
}

如何使用异步获取的参数过滤 react-admin 中的列表？

How to filter a list in react-admin with a parameter that is fetched asynchronously?

reactjs

react-admin

blitz.js