在React-Admin中点击提交后如何重定向/折叠扩展的编辑表单

Question

I am currently trying to collapse the edit form from the list view in React-Admin after hitting the submit button. I want to be able to view those updated changed in the new list form after hitting submit as well.

Right now I have a class which handles when the form is submitted, and I am using window.location.replace('URL') within that class to try and redirect the page. The problem I am currently running into is that since I want the page to redirect to the same URL, It doesn't show the changes made and also doesn't collapse the edit form. When I use a different URL and go back to the list view it shows all the changes. So what I essentially want is to just reload the page (so everything is updated and the edit bar is collapsed) after the form is submitted. However, when I used window.location.reload() , it reloads the page immediately before saving any of the data from the edit form.

This is the code I currently have which handles submit:

const saveWithNote = (values, basePath, redirectTo) =>
  crudCreate(
    'usergrouprights',
    {
      ...values,
      GroupRights: CalcGroupPermissions(values).rights,
      GroupDenials: CalcGroupPermissions(values).denials
    },
    basePath,
    {
    redirectTo
    }
  );


class SaveWithNoteButtonView extends Component {
  handleClick = () => {
    const { basePath, handleSubmit, redirect, saveWithNote } = this.props;

    return handleSubmit(values => {
      saveWithNote(values, basePath, redirect);
      window.location.replace('/#/usergrouprights');
      // window.location.reload();
    });
  };

  render() {
    const { handleSubmitWithRedirect, saveWithNote, ...props } = this.props;

    return (
      <SaveButton handleSubmitWithRedirect={this.handleClick} {...props} />
    );
  }
}

const SaveWithNoteButton = connect(
  undefined,
  { saveWithNote }
)(SaveWithNoteButtonView);

export default SaveWithNoteButton;

In the list view, I have a custom toolbar which is the following:

const PostEditToolbar = props => (
  <Toolbar {...props}>
    <SaveWithRightsValuesButton />
  </Toolbar>
);

When the code is run, It submits everything properly but I need to manually reload the page to view the changes and for the edit form to collapse as well. I am unsure if using the window.location.replace or reload call is the right idea as it is not working the way I would like it to at the moment.

Answer 1

Try adding

redirect="list"

to SaveButton :

<SaveButton
  handleSubmitWithRedirect={this.handleClick}
  redirect="list"
  {...props}
/>