typescript - 从graphql填充时无法编辑ag-grid-react网格中的单元格

Question

使用带有 react 和 typescript 的 ag-grid，我有一个定义为可编辑的列，它使用来自 GraphQL 查询的数据（保持状态）进行初始化。

编辑单元格时出现以下错误： TypeError: Cannot assign to read only property 'destination' of object '#'

它落在的代码是 ValueService../node_modules/ag-grid/dist/lib/valueService/valueService.js.ValueService.setValue

有谁知道它试图在哪里存储更改的值以及为什么会发生这种情况？

代码片段：

componentWillMount() {
    // we use state because the columns might change dynamically
    this.setState( {   columnDefs: this.createColumnDefs() });
}
createColumnDefs() {
    return [
        { colId: 'b', headerName: 'ID', field: 'rowID', hide: true },
        { colId: 'c', headerName: 'Name No.', field: 'nameNo', hide: true },
        { colId: 'h', headerName: 'Destination', field: 'destination', editable: true},
        { colId: 'i', headerName: 'CopyTo', field: 'copyTo', editable: true },
        { colId: 'j', headerName: 'Subject', field: 'subject', editable: true },
        { colId: 'k', headerName: 'Body', field: 'body', editable: true }
    ];
}
componentWillReceiveProps(nextProps: SelectionQueryProps) {
    ........
    // props come from an Apollo/GraphQL wrapper so setting it in state
    this.setState( { data: nextProps.data } );
    }
}
render() {
    if (!this.state.data || this.state.data.loading || !this.state.data.statementCreation) {
        return <div><Loader active={true} inline="centered" size="large" /></div>;
    }
    return (
                    <AgGridReact
                        animateRows={true}
                        enableColResize={true}
                        enableFilter={true}
                        enableSorting={true}
                        enableRangeSelection={true}
                        rowModelType="inMemory"
                        columnDefs={this.state.columnDefs}
                        singleClickEdit={true}
                        stopEditingWhenGridLosesFocus={true}
                        rowSelection={'multiple'}
                        onGridReady={this.onGridReady}
                        onRowSelected={this.onRowSelected}
                        suppressRowClickSelection={this.props.generate}
                    />
    );
}
private onGridReady = (params: GridReadyEvent) => {
    this.gridApi = params.api;
    if (this.state.data && !this.state.data.loading && this.state.data.statementCreation) {
        params.api.setRowData(this.state.data.statementCreation);
        params.columnApi.autoSizeAllColumns('autosizeColumns');
        params.api.sizeColumnsToFit();
    }
}