Reactjs 如何在不刷新react redux中的页面的情况下删除最后一行并在引导表中不显示数据

如果我在表中有2行，则只有最后一行不会被删除；如果我删除了任何1行，则该行会被删除；如果表中只有一行，则该行会在刷新页面后被删除。如何在不刷新的情况下删除？。 重复操作：

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=（单元格，行）=>{
报税表（
)
}

引导表：

 <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>

#
客户名称
电子邮件
创建
接触
行动

尝试将数据维护为状态/道具。您应该使用state/props，以便在页面呈现时不会出现问题。点击API调用以存储每行删除操作的当前可用数据，并将其存储在state/props中。这可以解决你的问题。希望对你有帮助！！。。快乐的编码

您实际上在哪里删除值？什么是

deleteBox

，从何处调用？提供一个代码示例可能会有所帮助。我需要从引导表中删除一行，我可以删除2行或更多行，但当有单行时，只有在刷新后才会将其删除-@drewreseUnderstand。你能在

deleteBox

、你的redux状态和UI之间包含删除数据的代码，或者更好地连接点吗？我从getadminlist函数中获取json，我在表中显示数据，并且可以显示所有json，我也可以删除，但当只有一个数据不刷新就无法删除时-@drewreseadminlist被当作道具并加载到表中，我仍然需要刷新要删除的页面。然后更新AdminList肯定会重新加载组件。可能在API命中成功后AdminList没有得到更新。尝试

console.log

AdminList在API命中之前和之后。如果我有2行或更多行，例如1 2和3，在删除2 3时，它会被删除，但在此之后，在删除1时，它会在刷新后被删除，那么它不会显示任何数据显示任何其他方法来执行此操作？这是通常发生的情况，对吗？删除2,3将只使用一个数据（'1'）进行渲染。请参见“让我整理一下”，组件在状态/道具更新时渲染，并且该更新的值应由组件使用。如果在渲染数据时遇到问题，请使用

componentDidMount（）

来

get

并将数据存储在每个挂载的道具中。使用GETAPI调用将数据存储在props中。这可能会有帮助！！。

 <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>