React-admin: Interacting with list filters throws a React update component error

Created on 23 Mar 2020  路  4Comments  路  Source: marmelab/react-admin

What you were expecting:
No error thrown in the console log.

What happened instead:
When a user interacts with the filter components on a List view, the following React error is thrown: "Warning: Cannot update a component from inside the function body of a different component."

Steps to reproduce:
Encountered the error in a custom app but it seems to be reproducible in the latest demo sandbox.
Open the console, error appears on the user applying a filter to the Posts list (e.g. Title) in the demo CodeSandbox example: https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

Environment

  • React-admin version: 3.3.2
  • Last version that did not exhibit the issue (if applicable):
  • React version: 16.13.1
  • Browser: Chrome 80.0.3987.132
  • Stack trace (in case of a JS error):
Warning: Cannot update a component (`ReactFinalForm`) while rendering a different component (`TextInput`). To locate the bad setState() call inside `TextInput`, follow the stack trace as described in https://fb.me/setstate-in-render
    in TextInput (at PostList.js:46)
    in div (created by FilterFormInput)
    in FilterFormInput
    in form
    in Unknown (created by ReactFinalForm)
    in ReactFinalForm (created by EnhancedFilterForm)
    in EnhancedFilterForm (created by Filter)
    in Filter (at PostList.js:44)
    in PostFilter (at PostList.js:128)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by ListToolbar)
    in ListToolbar
    in div
    in Unknown (created by List)
    in List (at PostList.js:125)
    in PostList (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at src/index.js:40)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (at Layout.js:42)
    in _default (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Context.Consumer)
    in Route (created by CoreAdminUI)
    in Switch (created by CoreAdminUI)
    in CoreAdminUI (created by AdminUI)
    in AdminUI (created by Admin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdminContext)
    in TranslationProvider (created by CoreAdminContext)
    in Provider (created by CoreAdminContext)
    in CoreAdminContext (created by AdminContext)
    in AdminContext (created by Admin)
    in Admin (at src/index.js:19)
bug

Most helpful comment

It seems the upstream bug is fixed in react-final-form v6.4.0. Can you upgrade and report here how it affects your bug?

https://github.com/final-form/react-final-form/issues/751#issuecomment-606212893

All 4 comments

Reproduced on master by removing the yarn.lock and reinstalling dependencies. As the current yarn.lock doesn't show the bug, I believe it's a regression in one of our dependencies that causes the bug.

OK, this is a bug in react-final-form (https://github.com/final-form/react-final-form/issues/751) revealed by a recent react update (https://github.com/facebook/react/issues/18178). There is nothing we can do in react-admin to fix this bug.

It seems the upstream bug is fixed in react-final-form v6.4.0. Can you upgrade and report here how it affects your bug?

https://github.com/final-form/react-final-form/issues/751#issuecomment-606212893

@fzaninotto no longer able to reproduce with the upgrade to react-admin v3.3.3 (react-final-form v6.4.0). Thanks for the feedback, closing issue :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kikill95 picture kikill95  路  3Comments

aserrallerios picture aserrallerios  路  3Comments

Dragomir-Ivanov picture Dragomir-Ivanov  路  3Comments

kdabir picture kdabir  路  3Comments

samanmohamadi picture samanmohamadi  路  3Comments