React-admin: Having trouble Updating an item with react-admin < Edit/> component

Created on 24 Jul 2020  路  6Comments  路  Source: marmelab/react-admin

What you were expecting:
Upon hitting the edit button on a list item the edit component properly renders with all the correct data for the item passed into its form. When I edit a field and hit save I expected the dataprovider.update() method to create the request and send it to the update route handler I'd written on the backend. Then either successfully update the product or provide some relevant error message.

What happened instead:
When the save button is hit I see in my server that the route handler for getOne is firing. I understand that getOne is called for rendering the edit component but I did not think it is supposed to fire for the save function. Also, the onSuccess function on the comp (copied from docs) throws an err in the js console saying that it's data prop is undefined. Meanwhile the save button stays permanently pressed down with a loading symbol on it and the browser tab.

Steps to reproduce:

  1. start up the app by running npm run buil, npm run server then go to http://localhost:5000/admin#/admin-products. You must be on react-admin branch (git checkout react-admin). Also, you must rebuild and restart the server after every change.
  2. click the show button on one of the items in the list
  3. click edit in top right corner of the show comp
  4. edit one of the fields and hit save
    You will see the getOne route handler firing in the server and the onSuccess func throw it's error in the js console in Chrome

Git clone link: https://github.com/cbddy/wholesale-portal.git

relevant files:
frontend

  • src/components//adminSetup/dataProvider.js
  • src/components//adminSetup/Setup.js
  • src/components//adminSetup/MenuItems/Products.js
    backend
    -server/server.js
    -server/admin-routes/admin-product.router.js
  • React-admin version: 3.7.0
  • Last version that did not exhibit the issue (if applicable):
  • React version: 16.13.1
  • Browser: Google Chrome
  • Stack trace (in case of a JS error): ?
needs more info

Most helpful comment

Follow this link.
https://codesandbox.io/s/loving-voice-qvtdk?file=/src/posts/PostList.js

  1. Click PostList
  2. Select "Edit" Button in one fo the rows on the PostList-> The Drawer would appear,
  3. Type something on the field and press save or edit.
  4. Expecting to send a request to DataProvider.update. But no response whatsoever on the console. The transform prop on the Edit component is not being called.

Thanks for the help!

All 6 comments

Hi,

Thank you for opening this issue :pray:

I need to reproduce the problem you describe in order to fix it quickly. But I can't use your repository which is private.

As explained in the bug report template:

  1. Please fork the following template on CodeSandbox : React Admin Template
  2. Reproduce your bug. Remember to give us the clearest and simplest example possible.
  3. Reply to this issue with the link of your CodeSandbox, and extra information if it's necessary.

Regards,
Adrien

I was able to recreate this in a fresh create-react-app available here: https://github.com/numtel/react-admin-demo-5082/commit/3b5c56f9513e91d3f89984b093008193c0521cfa

In this example, 2 different react-admin instances are created inside of a react-router.

On the component exported from admin.js and mounted at /admin, the update and delete events are never invoked on the [extremely bare-bones] dataProvider.

On the other instance mounted at /other-admin, the same [duplicated] code is used but it is supplied as children to the <Route> component instead of as the component attribute.

There's not enough information from the original post to say that this is the same reason why @Jack-B-Lenihan had this problem but this seems to fix it in my case.

Experience the same problem described by @Jack-B-Lenihan.
I wrote the GetOne specifically just to comply to the doc. But the SaveButton doesn't call the DataProvider.update.

I follow this tutorial.
https://marmelab.com/blog/2019/02/07/react-admin-advanced-recipes-creating-and-editing-a-record-from-the-list-page.html
The demo for this tut works but it isn't using the latest version and written in 2019.

I'm writing a sample case on https://codesandbox.io, pls allow 24 hours.

Follow this link.
https://codesandbox.io/s/loving-voice-qvtdk?file=/src/posts/PostList.js

  1. Click PostList
  2. Select "Edit" Button in one fo the rows on the PostList-> The Drawer would appear,
  3. Type something on the field and press save or edit.
  4. Expecting to send a request to DataProvider.update. But no response whatsoever on the console. The transform prop on the Edit component is not being called.

Thanks for the help!

This is not demonstrating a bug in react-admin, but a problem you're having integrating it. What you are trying to do is actually possible with react-admin (see the reviews list in the e-commerce demo, https://marmelab.com/react-admin-demo/#/reviews), so the problem lies in your code.

So this issue lies in the category of "how to / troubleshooting", which should be asked on stack Overflow rather than here.

If anybody is looking for a solution, for some reason undoable in edit is causing problems. Set it to false, and update endpoint will get called. Don't know whats going on, I am trying to put this component under a special endpoint, and the parent app is managed with MobX so for some reason it might conflict, but after good 5h I finally got the update to work properly.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pixelscripter picture pixelscripter  路  3Comments

Dragomir-Ivanov picture Dragomir-Ivanov  路  3Comments

Kmaschta picture Kmaschta  路  3Comments

yangjiamu picture yangjiamu  路  3Comments

aserrallerios picture aserrallerios  路  3Comments