Reactjs Material Table Tree模式在添加行数据时挂起

Question

within my Reactjs app , i'am using material-table widget inside my component :

render() {

return (
  <div>
    <Row>
      <MaterialTable
        title="Mon équipement"
        style={{ width: "100%", margin: "0%" }}
        localization={this.localization}
        columns={this.state.columns}
        data={this.state.equipments}
        options={{
          headerStyle: { borderBottomColor: 'cornflowerblue', borderBottomWidth: '3px', fontFamily: 'verdana' },
          actionsColumnIndex: -1,
          exportButton: true,
          draggable: true,
          grouping: false
        }}
        editable={{
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve) => {
              this.handleRowUpdate(newData, oldData, resolve);
            }),
          onRowAdd: (newData) =>
            new Promise((resolve) => {
              this.handleRowAdd(newData, resolve)
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve) => {
              this.handleRowDelete(oldData, resolve)
            }),
        }}
        parentChildData={(row, rows) => rows.find(item => item.id === row.parentId)}
      />
    </Row>
  </div>
);

}

As you can see , i'm setting up my tree Mode within this line :

    parentChildData={(row, rows) => rows.find(item => item.id === row.parentId)}

The problem , that when adding a new row data

I ve this error

RangeError: Maximum call stack size exceeded DataManager.parentChildData [as parentFunc]

Suggestions ?

Answer 1

I ran into a similar issue but it was because my table was in a reusable component and some of the data passed to that component didn't have a tree structure (ie no id and parentId properties) so the table was failing to render for those. I added props to check if the data passed to the component was expected to have a tree structure and that seems to have resolved the issue for me:

parentChildData={props.hasParentChildData? (row:any, rows:any) => rows.find((a:any) => a.id === row.parentId) : null}