TypeError keep throwing if renew data after delete all rows in table

Hi, I have a problem here: The table will throw Uncaught (in promise) TypeError: Cannot read property 'coreId' of undefined if I renew the data source after delete all rows (not matter delete one by one or delete all of them once), but it works fine after I re-fresh page even the table is empty. The Error screen shot:

Also, the table is working well for adding (renew data source), multi-delete rows (just not delete all). And the way I am working on it is:

...
remoteDelete = (row) => {
          
        let settleFlag = 1;
        let settleInfo = {coreId: row};
        this.props.registerDevice(settleInfo, settleFlag).then(
            (res) => {
                // --> renew data source from database after deleted rows
                this.setState({dataArr: res.data.devices, unsettledDevices: res.data.unsettledDevices});
            },
            (err) => {
                console.error(err);
            }
        );
        console.log('delete', settleInfo);
    }

onAddRow = (row) => {
        let settleFlag = 0;
       
        this.props.registerDevice(row, settleFlag).then(
            (res) => {
                // --> renew data source from database after adding row
                this.setState({dataArr: res.data.devices, unsettledDevices: res.data.unsettledDevices});
            },
            (err) => {
                  console.error(err);
            }
        );
    }

options = {
        // paginationPosition:"top",
        paginationShowsTotal: this.renderPaginationShowsTotal,
        sizePerPageList: ['10',  '30', '50', '60'],
        sizePerPage: 10,
        sizePerPageDropDown: this.renderSizePerPageDropDown,
        // exportCSVBtn: this.createCustomExportCSVButton,
        defaultSortName: 'coreId',
        defaultSortOrder: 'asc',
        
        handleConfirmDeleteRow: this.confirmDelete,
        onDeleteRow: this.remoteDelete,

        insertModalHeader: this.modalHeader,
        insertModalBody: this.modalBody,

        insertText: 'register',
        deleteText: 'unregister',
        
        onAddRow: this.onAddRow,   
    }

...
render() {
        const {dataArr, errors, delModalOpen, delNext, delDeviceId} = this.state;
        let data = _.isEmpty(dataArr)? [] : dataArr;
        console.log('device render', data);  //--> The data is correct when the error comes
        const confirmMegs = `Do you want to unregister device:`;
        return (
            <div>
                <BootstrapTable data={data} striped hover search 
                    condensed pagination insertRow deleteRow remote={this.remote}  options={this.options} selectRow={this.selectRowProp}>

                    <TableHeaderColumn isKey tdStyle={{whiteSpace: 'normal', 'wordWrap': 'break-word'}} 
                        thStyle={{whiteSpace: 'normal'}} dataFormat={this.coreIdLink} dataField="coreId" dataSort>Core ID</TableHeaderColumn>
                    ...
                </BootstrapTable>
            </div>
}

I check the data source when it renew (adding or deleting), they look same, so are there any errors in setting or usage of the table? Please give me some hints. Thank you.

[thminggg]

@AllenFang Thanks so much for updating and your checking. I am going to re-examine my code, and try to provide a minimal setting to re-produce the error. But it may take me a long time since the project is still growing now. Thanks! 👍

[thminggg]

Hi @AllenFang , I am encountering the same problem when I try to add new row after deleting all existing rows. My code has no remote() being used. My code is as following:

onAddRow(row) {
     if(!row[prop]) {
        return prop + " is missing";
      }
    }
    addRow(row);
}

From my guess, the bug should be caused by the TableDataStore (I’m not sure, just guessing from the documentation). Thus, I add a re-rendering in onAfterDeleteRow, like this:

onAfterDeleteRow(rowKeys){
    rowKeys.map(rowKey => {
      removeRow(rowKey);
    });
    this.setState(this.state);
}

This is a temporary fix for this problem from my implementation, and will cause re-rendering, and this will be the drawback by this quick fix.

Still, thank you for contributing the community and very obliged to use your React Bootstrap Table, it is so good! Also your hard-work to reply issues!