MuiDataTables中传入setSelectedItems后复选框功能异常求助

你的问题核心是在onRowSelectionChange回调中更新状态时错误地做了累加操作，导致组件内部选中状态与你的selectedItems状态不一致，进而引发复选框功能异常。

修正后的配置代码 #

const option: FilterType | any = {
    filterType: 'checkbox',
    download: false,
    expandableRowsOnClick: false,
    search: false,
    selectableRows:'multiple',
    selectableRowsHeader:true ,
    selectToolbarPlacement: 'none',
    onRowSelectionChange: (currentSelect:any, allSelected:any) => {           
        const selectedIds = allSelected.map((item:any) => {
            return data.at(item.index).order_id;
        }); 
        // 直接用当前所有选中的ID替换原有状态，而非累加
        setSelectedItems(selectedIds);
        console.log(selectedIds);           
    },
}

问题原因说明 #

• onRowSelectionChange的第二个参数allSelected已经包含了当前表格中所有选中的行，不需要再和之前的selectedItems合并
• 你之前的写法[...selectedItems,...selectedIds]会重复累加历史选中ID与当前选中ID，导致selectedItems内容和表格实际选中行完全不符，进而让复选框的选中状态出现混乱
• 直接用allSelected生成最新的selectedIds并更新状态，就能保证你的组件状态和表格内部选中状态保持一致

进阶：手动控制选中状态（可选） #

如果需要从外部控制表格的选中行，可添加selectedRows配置项，将selectedItems映射为对应的行索引，实现双向同步：

// 把选中的ID转换成表格行索引
const selectedRowIndexes = selectedItems.map(id => {
    return data.findIndex(item => item.order_id === id);
});

const option: FilterType | any = {
    // ...其他配置项
    selectedRows: selectedRowIndexes, // 同步外部状态到表格选中状态
    onRowSelectionChange: (currentSelect:any, allSelected:any) => {           
        const selectedIds = allSelected.map((item:any) => {
            return data.at(item.index).order_id;
        }); 
        setSelectedItems(selectedIds);
        console.log(selectedIds);           
    },
}

内容的提问来源于stack exchange，提问作者hamza irfan