Reactjs Material Table Tree模式在添加行數據時掛起

Question

在我的 Reactjs 應用程序中，我在我的組件中使用材料表小部件：

使成為（） {

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>
);

}

如您所見，我在這一行中設置了我的樹模式：

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

問題，當添加新的行數據時

我有這個錯誤

RangeError：超過最大調用堆棧大小 DataManager.parentChildData [as parentFunc]

建議？

Answer 1

我遇到了類似的問題，但這是因為我的表位於可重用組件中，並且傳遞給該組件的某些數據沒有樹結構（即沒有id和parentId屬性），因此表無法為那些呈現. 我添加了道具來檢查傳遞給組件的數據是否應該具有樹結構，這似乎已經解決了我的問題：

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