问题描述
所需的流量:
我有 <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,但在这种情况下,您应该在获取时禁用该按钮,以向用户表明他们的操作已被考虑在内。