Question

我使用 Material UI 的 Datagrid 进行单元格编辑。一切都很好，只是当我坚持一个值时，它有可能出错，如果是这种情况，那么我需要恢复到初始状态。

我想我可以简单地从 API 重新获取我的数据，并且更改会立即显示给用户。但是，在出现错误的情况下，我的 API 数据不会更改：因此 Material UI 的内部 Datagrid 状态不会触发刷新并使用持久化的本地值。

这是我的数据网格：

<DataGrid
                rows={data}
                columns={columns}
                onEditCellChangeCommitted={(values, event) => {

                    updateApi(values).then(r => {
                        //Success
                    }).catch(e => {
                        //Error Whilst updating
                        // Revert back to passed in Data
                        }
                    ).finally(() => {
                            //api.forceUpdate(null);
                        }
                    )
                }}

            />

我试图做一个 api.forceUpdate(null); 但没有奏效。我还尝试将 editMode 设置为服务器，这再次不起作用。

我也尝试过 event.stopPropogation() 但我不知道我是否想停止这个过程，直到 updateApi 承诺得到解决，更改已经提交。

Answer 1

首先我使用 onCellValueChange 而不是 onEditCellChangeCommitted。我动态地改变了这个值。

  const onCellValueChange = (value: GridEditCellValueParams) => {
    // Get the row
    const rowIndex = rows.findIndex(row => row.id === value.id);

    if (rowIndex >= 0) {
      const row = rows[rowIndex] as any;

      // Validate if changed
      if (value.field in row && row[value.field] !== value.value) {
        const data = { id: row.id, [value.field]: value.value };

        // Sending to API
        Api.product.update(data).then(res => {
          const newRows = [...rows] as any;

          if (res.success) {
            // Change to new value
            newRows[rowIndex][value.field] = value.value;
          } else {
            // Change to old value
            newRows[rowIndex][value.field] = row[value.field];
          }

          setRows(newRows);
        });
      }
    }
  };

材质 UI 数据网格单元格编辑还原提交

1 个答案: