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}