4

I am now using the react-admin framework, when the user clicks the Save button on the Edit page. Normally it will go to the List page and show an undo notification at the bottom, but at that time server-side gets validation error (for example, image size, file size). Then all user input at the Edit page is lost.

How can we still remain on the Edit page in case of the server-side error, and go to the List page only if the sever-side returns success?

If I put redirect = false, it will not go to the List page even if the server-side returns success: 

const CustomToolbar = props => (
    <Toolbar {props} >
        <SaveButton redirect={false}/>
    </Toolbar>
)
mebius99
  • 2,495
  • 1
  • 5
  • 9
sunfly
  • 191
  • 6

1 Answers1

2

React Admin uses an approach called Optimistic Rendering: when a user fill a form, we are optimistic and render the better result.

This globally improve the user experience by making the results displayed faster, even before the API is reached.

The bad side is that, if the form isn't strictly validated client-side and the API throws an error, the user have to do it again.

From here, I see two solutions to your problem:

  1. Implement a more strict client-side validation of your form
  2. Disable the optimistic rendering by specifying undoable={false}
<Edit {...props} undoable={false}>
    {...}
</Edit>
Kmaschta
  • 2,369
  • 1
  • 18
  • 36