从数组中删除指定对象元素,应用场景:删除前端增行没有保存导数据库的表格数据

addRows() {
        const length = this.props.store.newDetailList.length;
        let obj = {
            'ids': length,
               ... //其他键值对
        };
        this.props.store.docDetailList.unshift(obj);
    };

首先新增一条数据,如上;

表格中的多选框,在state 中设被选中的多选框,删除时及时重置为空数组

const {selectedRowKeys} = this.state;
const rowSelection = {
      selectedRowKeys,
          onChange: (selectedRowKeys, selectedRows) => {
                let selectedRowsIds = [];
                this.setState({selectedRowKeys:selectedRowKeys})
                for (let i = 0; i < selectedRows.length; i++) {
                    selectedRowsIds.push(selectedRows[i].id||selectedRows[i].ids)
                }
                this.props.store.detailSelectedRowsId = selectedRowsIds;
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User',
                name: record.name,
            }),
};

//从数组中删除指定键值的对象   

removeObjFromArrayByKeyValue(arr, attr, value) {  //数组,属性(根据哪个key值删的),属性值(key 对应的value 是多少)

     var index = 0;

    for (let i = arr.length - 1; i > -1; i--) {

        if (arr[i][attr] == value) {

           index = i;

           break;

        }

    }

    arr.splice(index, 1);

    };


现在需要根据已经传入数据库的值id和没有传入的ids两个key 值来操作数组

removeObjFromArrayByKeyValue(arr,value) {  //数组,属性,属性值
        var index = 0;
        for (let i = arr.length - 1; i > -1; i--) {
//我改成了ids id,当数组中是ids的时候,按ids来删,id同理
            if (arr[i].id == value||arr[i].ids == value) {
                index = i;
                break;
            }
        }
    arr.splice(index, 1);
};


    delRows() {
        const { detailSelectedRowsId } = this.props.store;
        if (detailSelectedRowsId.length == 0) {
            GlobalStore.showError(intl.get('SELECT_ONE_TO_DEL'))
        } else {
            this.setState({selectedRowKeys:[]})
            for (let i = 0; i < detailSelectedRowsId.length; i++) {
  //调用函数
this.removeObjFromArrayByKeyValue(this.props.store.docDetailList,detailSelectedRowsId[i])//删除选中的数据
            }
            this.setState({
                flag: !this.state.flag
            })
            let delflag=true;//这是从来判断有空数据不能保存的
            for(let i=0;i<this.props.store.detailSelectedRowsId.length;i++){ 
                if(!this.props.store.detailSelectedRowsId[i]){
                    delflag=false;
                    break;
                }
            } 
            if(delflag){
                //没有空数据的时候就调用后端接口
                this.props.store.deleteDetails(this.props.store.detailSelectedRowsId)
            }else{
                return 
            }
        }
    };

猜你喜欢

转载自blog.csdn.net/weixin_41606276/article/details/103876539