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

本文链接：https://blog.youkuaiyun.com/weixin_41606276/article/details/103876539

本文介绍了在前端使用Ant Design的Table组件时，如何删除未保存到数据库的表格行数据。重点在于根据已保存ID和未保存的IDs，从数组中删除指定对象的方法，确保状态管理的正确更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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