React-admin: <ReferenceManyField /> passes non-consistent properties (loaded?) to child components

Created on 15 Jul 2020  路  9Comments  路  Source: marmelab/react-admin

What you were expecting:
I was expecting the display of <Show /> page with <ReferenceManyField /> after the transition from <List> page.

What happened instead:
Application crashed

Steps to reproduce:
The bug stably appears with the following algorithm of actions:

  • open <List> page
  • Go straight to <Edit> page (you cannot be on the page for a long time because the data in the list is discarded)
  • save the record with a redirect to <List> page
  • while the <List> update loader is spinning, click on the line and go to <Show /> page with <ReferenceManyField />
  • the application crashes

image

I鈥檓 not sure, but the initial analysis says that useReferenceManyFieldController passes in <ListContext.Provider value = {controllerProps}> of <ReferenceManyField /> loaded property in the wrong order. As a result, in <DataGrid /> it is valid with loaded: true with ids: undefined

Other information:
YhhyHUwuHm

Environment

  • React-admin version: 3.7.1
  • Last version that did not exhibit the issue (if applicable): 3.6.2
bug

Most helpful comment

I think I have the same problem with my app, if not I will create a new issue.
I made a codesandbox for the first time here: https://codesandbox.io/s/loving-lovelace-d7zji?file=/src/data.js
What I changed was removing the authProvider and adding an extra field to the Users data called: "other_user_id"
Then created a ReferenceManyField in UserEdit.
image

How to reproduce:

  1. Go to Users
  2. Click on Annamarie Mayer
  3. Change Annamarie Mayer to Annamarie Mayers
  4. Save
  5. Quickly click Breanna Gibson
  6. React Admin crashes with "TypeError: Cannot read property 'map' of undefined"

How to fix this, is to either wait for it to save completely, or to go to Breanna Gibson before doing these steps.

Probably related problem, and steps to reproduce are (make sure you refreshed the page):

  1. Go to Users
  2. Click on Annamarie Mayer
  3. Use the reference to Breanna Gibson
  4. React Admin crashes with "TypeError: Cannot read property '2' of undefined"

This has the same fix, if you go to Breanna Gibson and Logan Schowalter before using the reference, it works fine.

I hope this helped, let me know if I should change something.

EDIT: @Luwangel, can you check out this post?
EDIT2: @fzaninotto, can you check out this post?

All 9 comments

Hi,

Thank you for opening this issue and giving so many details :pray:

I need to reproduce the problem you describe on my side in order to fix it quickly. Could you create a CodeSandbox?

  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

CodeSandbox does not work after updating react-admin dependency to version 3.7.1

@MattWilliamsDev We made a fix recently https://github.com/marmelab/react-admin/pull/5068. It should work now.

I cannot repeat this in the CodeSandbox, because after saving the record and switching to the list, its optimistic loading does not start (the data is located locally). The problem appears exactly when I go to Show page while the List is loading

@wmwart Can you try now to build a CodeSandbox reproducing the problem?

I think I have the same problem with my app, if not I will create a new issue.
I made a codesandbox for the first time here: https://codesandbox.io/s/loving-lovelace-d7zji?file=/src/data.js
What I changed was removing the authProvider and adding an extra field to the Users data called: "other_user_id"
Then created a ReferenceManyField in UserEdit.
image

How to reproduce:

  1. Go to Users
  2. Click on Annamarie Mayer
  3. Change Annamarie Mayer to Annamarie Mayers
  4. Save
  5. Quickly click Breanna Gibson
  6. React Admin crashes with "TypeError: Cannot read property 'map' of undefined"

How to fix this, is to either wait for it to save completely, or to go to Breanna Gibson before doing these steps.

Probably related problem, and steps to reproduce are (make sure you refreshed the page):

  1. Go to Users
  2. Click on Annamarie Mayer
  3. Use the reference to Breanna Gibson
  4. React Admin crashes with "TypeError: Cannot read property '2' of undefined"

This has the same fix, if you go to Breanna Gibson and Logan Schowalter before using the reference, it works fine.

I hope this helped, let me know if I should change something.

EDIT: @Luwangel, can you check out this post?
EDIT2: @fzaninotto, can you check out this post?

Seems like pings with an edit do not work. So @Luwangel or @fzaninotto.
Any update on this issue? This completely breaks undoable/optimistic rendering with a ReferenceManyField.

Thanks, reproduced. I'm marking this as a bug.

So I'm making progress in understanding what happens:

  1. After editing a user, react-admin does an optimistic update and redirects to the list
  2. as the optimistic mode is turned on, the read queries are resolved immediately from the store
  3. If the user clicks on an user in the list before the end of the undo period, the getOne request resolves immediately from the store (no problem), and the getManyReference also resolves immediately from the store (problem, because the store is empty).

So the ListContext for the SingleFieldList contains loaded: true and ids: undefined until the end of the optimistic mode, which crashes the rendering.

I understand the cause, but I have yet to find a good solution.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ericwb picture ericwb  路  3Comments

aserrallerios picture aserrallerios  路  3Comments

kdabir picture kdabir  路  3Comments

waynebloss picture waynebloss  路  3Comments

fzaninotto picture fzaninotto  路  3Comments