Question

我是ReactJS的新手，我正在尝试使用React Data Grid。当我过滤表时，对单元格进行更改，然后取消过滤表，更改将恢复为先前的值。如果我改变 const rows = this.state.rows.slice（0）; 至 const rows = Selectors.getRows（this.state）; 我的更改仍然存在，但随后我无法取消过滤表。

这是我处理要更新的网格行的方式：

  handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const rows = this.state.rows.slice(0);
    // const rows = Selectors.getRows(this.state);
    
    for (let i = fromRow; i <= toRow; i++) {
      const rowToUpdate = rows[i];
      const updatedRow = update(rowToUpdate, { $merge: updated });
      rows[i] = updatedRow;
      if (!rows[i].Date) {
        const index = this.state.counter;
        newRows[index] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ newRows });
      } else {
        updatedRows[rows[i].Date] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ updatedRows });
      }
    }
    this.setState({ originalRows: rows });
  };

我看过RDG文档和示例。在他们的过滤器示例中，他们不允许您编辑单元格。

谢谢！

Answer 1

状态是不可变的，在您需要进行复制然后操作之前，保持切片状态不变是一个坏主意，因此您可以做到

const rows = Object.assign([],this.state.rows)

一个生动的例子或行中保存的数据类型将有很大帮助

Answer 2

我想出了一个解决方案，我使用了npm库Lodash及其函数_.unionBy。

此解决方案将每个对象的SN键上的更新后的行数组与原始状态的行数组合并为一个变量，然后使用结果设置状态：

 handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const rows = Selectors.getRows(this.state);
    const rowsTwo = Object.assign([], this.state.rows);
    
    for (let i = fromRow; i <= toRow; i++) {
      const rowToUpdate = rows[i];
      const updatedRow = update(rowToUpdate, { $merge: updated });
      rows[i] = updatedRow;
      if (!rows[i].Date) {
        const index = this.state.counter;
        newRows[index] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ newRows });
      } else {
        updatedRows[i] = rows[i];
        this.handleUpdate(rows[i]);
      }
    }
    const result = _.unionBy(updatedRows, rowsTwo, 'SN');
    
    this.setState({ rows: result });
  };

取消过滤后，React Data Grid不会保留更改

2 个答案: