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

Question

我是 ReactJS 的新手，我正在尝试使用 React Data Grid。当我筛选 table 时，对单元格进行更改，然后取消筛选 table，更改将恢复为之前的值。如果我改变 const 行 = this.state.rows.slice(0); 到 const 行 = Selectors.getRows(this.state); 我的更改保留了下来，但是我无法取消过滤 table.

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

  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 在取消过滤后不保留更改

React Data Grid does not keep changes after un-filtering

javascript

reactjs

react-data-grid