我如何做一个改变某些东西然后在 react-admin 中打开另一个屏幕的动作?

How do I make an action that mutates something and then opens another screen in react-admin?

我正在为事件管理系统构建前端。一个功能“批准”,将为当前事件创建一个新的“工作流”对象,然后在新创建的对象上打开一个编辑视图。

执行改变对象的操作很容易(在本例中创建新的工作流对象),但我不清楚如何才能让用户真正看到新创建的对象对象。

这是我目前得到的:

const WorkflowButton = ({ data, label, ...props  }) => {
    const icon = props.icon;
    const current_state = data && data.workflow && data.workflow && data.workflow.workflow_state
    const valid_states = props.valid_states || []
    const current_state_is_valid = valid_states.includes(current_state)
    const payload = {
        data: {
            communication_id: data && data.id,
            workflow_state: props.workflow_state,
            data:"{}",
            author:get_current_user()
        }
    }

    const refresh_function = useRefresh()
    const [mutate_the_thing, { loading }] =
        useMutation({
        type: 'create',
        resource: 'workflows',
        payload: payload,
    });

    const mutate_and_refresh = ()=>{
        mutate_the_thing();
        refresh_function();
    }


    const disabled = loading || (! current_state_is_valid)
    return <Button label={label} onClick={mutate_and_refresh} disabled={disabled} icon={icon}/>;
};

我不想刷新当前视图,而是想跳转到一个全新的视图,即与刚刚插入的对象相对应的视图。那我该怎么做呢?

使用redirect(),文档中有例子: https://marmelab.com/react-admin/Actions.html#handling-side-effects-in-other-hooks

import * as React from "react";
import { useMutation, useNotify, useRedirect, Button } from 'react-admin';

const ApproveButton = ({ record }) => {
    const notify = useNotify();
    const redirect = useRedirect();
    const [approve, { loading }] = useMutation(
        {
            type: 'update',
            resource: 'comments',
            payload: { id: record.id, data: { isApproved: true } },
        },
        {
            onSuccess: ({ data }) => {
                redirect('/comments');
                notify('Comment approved');
            },
            onFailure: (error) => notify(`Comment approval error: ${error.message}`, 'warning'),
        }
    );
    return <Button label="Approve" onClick={approve} disabled={loading} />;