Блог

Я использую сетку данных пользовательского интерфейса Material с редактированием ячеек. Все работает отлично, за исключением того, что, когда я сохраняю значение, есть вероятность, что оно ошибается, и если это так, то мне нужно вернуться в исходное состояние.

Я думал, что смогу просто повторно загрузить свои данные из API, и изменения будут сразу же показаны пользователю. Однако в случае ошибки мои данные API не меняются: поэтому внутреннее состояние сетки данных пользовательского интерфейса Material не вызывает обновления и использует сохраненное локальное значение.

Это моя сетка данных:

 <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 не будет выполнено, изменение уже зафиксировано.

Сначала я использую 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 amp;amp; 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);
        });
      }
    }
  };