TypeError: Cannot read properties of undefined (reading 'id')

Hi,

unfortunately I cannot reproduce reliably, but it seems that with the introduction of #619 the following exception occurs:

       Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')
    at material-table.js:1273:1
    at Array.map (<anonymous>)
    at reduceByDefaultSort (material-table.js:1271:1)
    at getDefaultCollectionSort (material-table.js:1261:1)
    at MaterialTable.setDataManagerFields (material-table.js:776:1)
    at MaterialTable.componentDidUpdate (material-table.js:835:1)
    at commitLifeCycles (react-dom.development.js:20684:1)
    at commitLayoutEffects (react-dom.development.js:23426:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)

It occurs when switching views in my application, so I assume when loading/unloading tables. Reason seems to be that sometimes the list of sort columns does not contain objects with a “tableData” object attached:

• OS: Win11
• Browser: Edge, Firefox

Any ideas?

[ghyoo91]

It can be reproduced in this page : https://codesandbox.io/s/new-tree-znzku?file=/src/App.js

And I think the reproduction’s conditions are

1. Use defaultSort option in the columns.
2. Prior componentDidUpdate before the data is applied.(In codesandbox, I just add the “setData([])”)

I made a pull request for fix this case, but there may be a better solution.

[floele]

I know that in my app the problem gets fixed if I remove the defaultSort attribute from the column but as mentioned before I was unable to reproduce that in a sandbox. This is an example table definition that causes issues:

    <MaterialTable
        columns={[
            { title: "Name", field: "description", defaultSort: "asc", editable: "never" },
            { title: "Value", field: "value" },
        ]}
        options={{
            paging: false,
            showTitle: false,
            actionsColumnIndex: 2,
            padding: "dense"
        }}
        data={settings}
        editable={{
            isEditable: (rowData) => true,
            isDeletable: (rowData) => false,
            onRowUpdate: (newData, oldData) =>
            {
                    const newList = [...settings];
                    const target = newList.find((el) => el.key === oldData?.key);
                    if (target) {
                        const index = newList.indexOf(target);
                        newList[index] = newData;
                        setSettings([...newList]);
                    }
            }
        }}
    />