React Data Grid не сохраняет изменения после отмены фильтрации

Question

Я новичок в ReactJS и пытаюсь работать с React Data Grid.Когда я отфильтрую свою таблицу, внесу изменения в ячейку, а затем отфильтрую таблицу, изменение вернется к своему предыдущему значению.Если я изменю константные строки = this.state.rows.slice (0);для констант строк = 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

Я нашел решение, я использовал библиотеку 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 });
  };

Answer 2

состояние является неизменным, плохая идея - продолжать разрезать данные как таковые, прежде чем вам нужно будет сделать копию, а затем манипулировать ею, поэтому вы можете сделать

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

кстати живой пример илитип данных, который вы держите в строках, очень поможет