Question

我正在使用Material-Table和ReactJS来创建数据表。该表可以正确加载并正确显示数据，但是一旦编辑数据，我就会在开发人员控制台中收到以下错误消息

下面是我的材料表代码

            <MaterialTable
              title={tbl_title}
              columns={datatable.columns}
              data={datatable.data}
              options={tableOptions}
              editable={{
                onRowAdd: newData =>
                  new Promise((resolve, reject) => {
                    setTimeout(() => {
                      {
                        const data = datatable.data;
                        data.push(newData);
                        setTable({ data }, () => resolve());

                      }
                      resolve()
                    }, 1000);
                  }),
                onRowUpdate: (newData, oldData) =>
                  new Promise((resolve, reject) => {
                    setTimeout(() => {
                      {
                        const data = datatable.data;
                        const index = data.indexOf(oldData);
                        data[index] = newData;
                        setTable({ data }, () => resolve());
                      }
                      resolve()
                    }, 1000)
                }),
              }}
            />

我只是使用提供者提供的相同代码示例，并做了一些小的修改以满足React Functional Component模式。如果有人能指出我正确的方向，那就太好了。

列出了类似错误Github Issue: 400的旧问题，但没有该问题的指导。

[编辑]

我不确定这是否有帮助，但是在重新安装依赖项后，我看到所有文件的最后修改日期很不寻常。

这会以某种方式影响依赖包的功能吗？

此外，编辑/添加行时的错误详细信息

我用来修复上图中错误的代码更改

文件：node_modules / material-table / dist / components / m-table-body.js：113

return renderData.map(function (data, index) {
    if (typeof(data.tableData) != "undefined") {

      if (data.tableData.hasOwnProperty("editing")) {
        return React.createElement(_this.props.components.EditRow, {
          columns: _this.props.columns.filter(function (columnDef) {
            return !columnDef.hidden;
          }),
          components: _this.props.components,
          data: data,
          icons: _this.props.icons,
          localization: (0, _objectSpread2["default"])({}, MTableBody.defaultProps.localization.editRow, _this.props.localization.editRow, {
            dateTimePickerLocalization: _this.props.localization.dateTimePickerLocalization
          }),
          key: index,
          mode: data.tableData.editing,
          options: _this.props.options,
          isTreeData: _this.props.isTreeData,
          detailPanel: _this.props.detailPanel,
          onEditingCanceled: _this.props.onEditingCanceled,
          onEditingApproved: _this.props.onEditingApproved,
          getFieldValue: _this.props.getFieldValue
        });
      } else {
        return React.createElement(_this.props.components.Row, {
          components: _this.props.components,
          icons: _this.props.icons,
          data: data,
          index: index,
          key: "row-" + data.tableData.id,
          level: 0,
          options: _this.props.options,
          localization: (0, _objectSpread2["default"])({}, MTableBody.defaultProps.localization.editRow, _this.props.localization.editRow),
          onRowSelected: _this.props.onRowSelected,
          actions: _this.props.actions,
          columns: _this.props.columns,
          getFieldValue: _this.props.getFieldValue,
          detailPanel: _this.props.detailPanel,
          path: [index + _this.props.pageSize * _this.props.currentPage],
          onToggleDetailPanel: _this.props.onToggleDetailPanel,
          onRowClick: _this.props.onRowClick,
          isTreeData: _this.props.isTreeData,
          onTreeExpandChanged: _this.props.onTreeExpandChanged,
          onEditingCanceled: _this.props.onEditingCanceled,
          onEditingApproved: _this.props.onEditingApproved,
          hasAnyEditingRow: _this.props.hasAnyEditingRow,
          treeDataMaxLevel: _this.props.treeDataMaxLevel
        });
      }

    }
  });

在材料表+ reactjs中进行内联编辑时出错

0 个答案: