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

【问题标题】：Material UI Data Grid Cell Edit revert commit材质 UI 数据网格单元格编辑还原提交
【发布时间】：2021-05-31 07:25:28
【问题描述】：

我正在使用 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 承诺，所以更改已经提交。

【问题讨论】：

标签： reactjs material-ui

【解决方案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);
        });
      }
    }
  };

【讨论】：