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

【问题标题】：Get the next record in react-admin在 react-admin 中获取下一条记录
【发布时间】：2021-08-08 12:34:46
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

因此，您只能在 API 中查询与当前 ID 相关的 prev/next 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，但在这种情况下，您应该在获取时禁用该按钮，以向用户表明他们的操作已被考虑在内。

【讨论】：