question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

crash in componentWillReceiveProps when changing data shape while sorted

See original GitHub issue

Describe the bug This is perhaps an overly-specific use-case, but a bug nonetheless… I have a table with a free action button that transposes the data in the table: on clicking the action button, it recalculates the rows and headers data which are stored in the parent state, and delivers it to the MaterialTable component. Everything works fine until I sort one of the last columns in the table. If the number of columns in the pre-transposed table is greater than the number of post-transposed columns, and if the “currently sorted” column no longer exists after transpose, then the sortList method in data-manager.js fails in UNSAFE_componentWillReceiveProps because there is no longer a column there, and the component crashes at line 421 below

https://github.com/mbrn/material-table/blob/695f95c3b3c8fa70cc3e2fe56e7d649b2eae0ca6/src/utils/data-manager.js#L417-L421

TypeError: Cannot read property 'customSort' of undefined
  at sortList(./node_modules/material-table/dist/utils/data-manager.js:633:1)
  at sortData(./node_modules/material-table/dist/utils/data-manager.js:886:1)
  at getRenderState(./node_modules/material-table/dist/utils/data-manager.js:134:1)
  at UNSAFE_componentWillReceiveProps(./node_modules/material-table/dist/material-table.js:424:1)

If I wrap the table in an Error boundary and force it to rerender, it works fine.

To Reproduce https://codesandbox.io/s/zen-moser-b802x

(note, the console error is not very informative there as it is trumped by an apparent error in react-beautiful-dnd)

Expected behavior deriving state from props should not crash the component, even if the shape of the props.data and props.columns has changed

Desktop (please complete the following information):

  • Browser : Chrome
  • react version 16.8.6
  • material-table version 1.40.1

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6

github_iconTop GitHub Comments

3reactions
alimirzaeicommented, Dec 22, 2019

In case of changing data, you can pass a new key to the component. Here is the sandbox which is working: https://codesandbox.io/s/broken-glitter-n3fs2

1reaction
tlambert03commented, Jul 3, 2019

Probably also worth referencing issue https://github.com/mbrn/material-table/issues/697 here… Seems like one reasonable solution, without having to muck with the sorting behavior in willReceiveProps, would be to set defaultSort on the first column (or at least a column that still exists) when changing the data in the table… then sortList would not be looking for a column that no longer exists

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to keep receiving data while keeping data in state in order?
When a user clicks on table header it sorts the table but again goes back to the new state changed by new data....
Read more >
React.Component
An update can be caused by changes to props or state. ... These methods are called when there is an error during rendering,...
Read more >
KendoReact Changelog - Telerik
replace the default shape property from rectangle to null — the shape property will be deprecated with v6.0.0 of the @progress/kendo-react- ...
Read more >
The React Handbook – Learn React for Beginners
While Props allow a Component to receive properties from its parent, to be “instructed” to print some data for example, state allows a...
Read more >
Writing Resilient Components - Overreacted
Don't stop the data flow; Always be ready to render; No component is a singleton; Keep the local state isolated. Even if you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found