Позволяет обновлять мою таблицу после редактирования с сеткой реагирующих данных

Question

Поэтому я пытаюсь использовать response-data-grid , и у меня возникла проблема с редактированием ячейки. Я пытаюсь отредактировать ячейку, а затем обновить ячейку, чтобы показать новое значение. Я перепробовал все примеры на веб-сайте сетки данных React, но ни один из них не помог. Я могу отредактировать ячейку, но если я нажму на другую ячейку или нажму Enter, ячейка вернется к своему старому значению. Я не знаю почему, но onGridRowsUpdated никогда не срабатывает! Я надеюсь, что кто-то может помочь мне с этим, и вот мой код:

import React, { Component } from "react";
import ReactDataGrid from "react-data-grid";
import 'react-data-grid/dist/react-data-grid.css';
class DataGrid extends Component {

    state = {
        rows: this.props.rows.map(p => p),
    };
    rowGetter = (i) => {
        console.log(i)
        return (this.state.rows[i]);
    }
    onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
        console.log('hello')
        this.setState(state => {
            const rows = state.rows.slice();
            for (let i = fromRow; i <= toRow; i++) {
                rows[i] = { ...rows[i], ...updated };
            }
            return { rows };
        });
    };
    rowGetter = (rowIdx) => {
        return this.state.rows[rowIdx]
    }

    rowGetter = (i) => {
        return this.state.rows[i];
    }
    render() {
        return (
            <ReactDataGrid
                enableCellSelect={true}
                columns={this.props.columns}
                rows={this.state.rows}
                rowGetter={this.rowGetter}
                rowsCount={this.state.rows.length}
                onGridRowsUpdated={this.onGridRowsUpdated}
            />
        );
    }
} export default DataGrid;