如何在对其中一个ListItem执行操作后更新ReferenceManyField

时间:2018-03-04 08:16:59

标签: reactjs react-redux admin-on-rest react-admin

我有一个用于编辑hasMany个孩子的实体的表单。在此表单中有一个ReferenceManyField组件。此组件列出了项目以及我创建的操作按钮,让我们说“批准”事情。

<Edit>
  <SimpleForm>
    <ReferenceManyField reference="Expenses" target="expenseReportId" label="Expenses">
      <Datagrid>
        <UnassignButton />
        <TextField source="name" />
      </Datagrid>
    </ReferenceManyField>
  </SimpleForm>
</Edit>

UnassignButton执行常规操作:

const action = (id, data, basePath) => ({
  type: 'EXPENSE_UNASSIGN',
  payload: { id: id, data: { ...data, expenseReportId: null } },
  meta: { resource: basePath, fetch: UPDATE, cancelPrevious: false },
})

执行此操作时,如何强制刷新ReferenceManyField或整个Edit表单?最佳做法是什么?

谢谢!

2 个答案:

答案 0 :(得分:1)

我会派遣

import { refreshView } from "react-admin";

改变状态后的

动作。

答案 1 :(得分:1)

现在您可以在react-admin中使用useRefresh钩子

const refresh = useRefresh();

要更新列表,只需使用刷新

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

export const MyButton = ({ record }) => {

    const notify = useNotify();
    const redirect = useRedirect();
    const refresh = useRefresh();
 
    const [createPost, { loading }] = useMutation({
        type: 'create',
        resource: 'posts',
        payload: { data:
                    {
                      userId: "xxxxx",
                      body: "something"
                      isConfirmed: false
                    }
                 }

    },
    {
        onSuccess: ({ data }) => {
            redirect('/posts');
            refresh();
            notify('post created');
        },
        onFailure: (error) => notify(`error: ${error.message}`, 'warning'),
    });

    return (
        <Button label="CREATE" onClick={ createPost } } disabled={loading} >
            Create Post
        </Button>
    )
};