在 react-admin 中获取下一条记录

如何解决在 react-admin 中获取下一条记录

所需的流量： 我有 <list> 个待批准的“图像”。 我单击一条记录，它会显示 <edit> 组件。 点击保存后，它应该带我到数据集中的下一条记录进行编辑。

我正在为如何实现这一目标而苦苦挣扎，这可能吗？

解决方法

这是一个很好的用例，不幸的是 react-admin 没有提供直接的方法来做到这一点。这是因为有一些复杂性取决于您的 API 如何处理上一个/下一个查询。让我解释一下。

如果您通过列表视图到达编辑视图，react-admin 知道与当前记录相关的上一条和下一条记录 - 应用了过滤器和排序。但是，如果当前记录是页面中的第一条或最后一条，或者用户直接到达“编辑”视图，则它不起作用。

因此，您只能查询 API 以获取与当前 ID 相关的上一个/下一个 ID。您的 API 应该为此公开一个自定义路由（如 GET /posts?before_and_after_id=123&sort=...&filter=...），目前没有标准。

我建议您将此逻辑放入新的 dataProvider 动词中，例如 dataProvider.getNext(id,sort,order,filter)。这样，<NextButton> 将如下所示：

const NextButton = () => {
  const [next,setNext] = useState();
  const record = useRecordContext();
  const dataProvider = useDataProvider();
  const params = useSelector(state => state.admin.resources.posts.list.params);
  const redirect = useRedirect();

  useEffect(() => {
    if (!record) return;
    dataProvider
       .getNext(record.id,params.sort,params.order,params.filter)
       .then(({ data }) => setNext(data));
  },[record]);

  const handleClick = () => {
    redirect(`/posts/${next.id}`);
  }

  if (!next) return null;

  return (
    <Button onClick={handleClick}>Next</Button>
  );
}

您可以选择在点击而不是在装载时查询 dataProvider，但在这种情况下，您应该在获取时禁用该按钮，以向用户表明他们的操作已被考虑在内。