как удалить последнюю строку и не отображать данные в таблице bootstrap, не обновляя страницу в соответствии с редукцией

Question

только последняя строка не удаляется, если у меня есть 2 строки в таблице, и если я удаляю любую 1 строку, эта 1 строка удаляется, а когда в таблице только одна строка, она удаляется после обновления страницы. Как удалить без refre sh ?. Действие приведения:

import {GET_FMP_CLIENT_REQUEST, GET_FMP_CLIENT_RESPONSE} from './index.js'

import Utils from '../../shared/utils';

const apiURL = 'fmp/admin/getAdminList';
const usr_id = Utils.getSessionStorage('usr_id');

export function getFmpAdminList(){

    let decodeValues = { 'json': JSON.stringify({'usr_id':usr_id}) }

    console.log("decodeValues-fmp",decodeValues)
    return ( dispatch ) => {
        dispatch( {type:GET_FMP_CLIENT_REQUEST} ); 
        fetch( `${Utils.getApiBaseUrl()}/${apiURL}`,  Utils.getPostOptions(decodeValues), 
            ).then( ( response ) => {
                return response.json();
             } ).then( ( retVal ) => {
                console.log("value-client-retVal",retVal) 
                if(retVal.status){ 

                    dispatch( {type:GET_FMP_CLIENT_RESPONSE, data : retVal.data} );
                }             
          } );
    }
}

функция удаления:

 deleteBox(usr_id) {
    const { getFmpAdminList } = this.props;
    if (usr_id != "") {
      let formValue = { 'usr_id': usr_id };
      console.log("delete formValues",formValue);
      let decodeValues ={ 'json': JSON.stringify(formValue) }
      console.log("delete decodeValues",decodeValues)
      fetch(`${Utils.getApiBaseUrl()}` + '/fmp/admin/deleteAdminTechnician',
      Utils.getPostOptions( decodeValues ),
      ).then( ( response ) => {
        return response.json();
      } ).then( ( res ) => {
        console.log("delete response",res);
        if (res.status == 1) {
          toast.success("User Deleted", {
            position: toast.POSITION.TOP_RIGHT,
            autoClose: 3000
          });
          this.props.getFmpAdminList();
        }
      });
    }
  }

statusFormatter = (cell,row) => { 
    return(  
            <div className="action-icons">
              <a href="#" onClick={this.toggleBox.bind(this,row.usr_id,"view")}><img src={"../"+viewimg}/></a>
              <a href="#" onClick={this.editbox.bind(this,row.usr_id,"edit")}><img src={"../"+editimg}/></a>
              <a href="#" onClick={this.deleteBox.bind(this, row.usr_id)}><img src={"../"+deleteimg}/></a>
            </div>
    )
}

Bootstrap таблица:

 <BootstrapTable className="work-order-table table-responsive"  data={AdminList}>
                          <TableHeaderColumn width="5%" dataField="any" dataFormat={this.indexN}>#</TableHeaderColumn>
                          <TableHeaderColumn width="25%" className="text-left" dataField='usr_first_name' dataAlign="left">Client Name</TableHeaderColumn>
                          <TableHeaderColumn width="15%" className="text-left" dataField='usr_email' dataAlign="left">Email</TableHeaderColumn>
                          <TableHeaderColumn width="15%" className="text-left" dataField='usr_created_date' dataFormat={this.createDateFormat} dataAlign="left">Created</TableHeaderColumn>
                          <TableHeaderColumn width="10%" className="text-left" dataField='usr_phone_no' dataFormat={this.campusFormatter} dataAlign="left">Contact</TableHeaderColumn>
                          <TableHeaderColumn width="20%" dataAlign="left" className="action-icons" isKey dataField='action' dataFormat={this.statusFormatter} dataAlign="left" >Action</TableHeaderColumn>
                        </BootstrapTable>

Answer 1

Попытайтесь сохранить данные как состояние / реквизиты. Вы должны использовать state / props, чтобы не возникало проблем при визуализации страницы. Нажмите API-вызов, чтобы сохранить текущие доступные данные в каждом действии удаления строки и сохранить их в состоянии / подпорках. Это может решить вашу проблему. Надеюсь, это поможет !! .. Счастливого кодирования .. !!