ASP.NET Core MVC+React中DevExtreme Grid选中行获取方法

问题根源 #

你错误地将患者数据源和选中行状态共用了同一个allPatients变量，DevExtreme React Grid的SelectionState组件的selection属性本应存储选中行的主键值数组（或索引数组），而非完整的行数据对象，这直接导致了数据格式混乱。

解决方案 #

1. 拆分状态：新增独立状态存储选中行的主键（比如id）
2. 配置SelectionState使用键模式，指定行主键字段
3. 通过选中的主键值，从患者数据源中筛选出规范的选中行对象

修改后的完整代码 #

import * as React from 'react';
import {
    Grid,
    Table,
    TableHeaderRow,
    TableSelection,
    TableColumnResizing
} from '@devexpress/dx-react-grid-material-ui';
import {
    SortingState,
    IntegratedSorting,
    SelectionState,
    IntegratedSelection
} from '@devexpress/dx-react-grid';
import { useEffect, useState } from "react";
import BaseToolbar from '../Base/BaseToolbar.js'

import '../styles/patients.css';

const URL = '/api/patients';

const columns = [
    { name: 'id', title: 'ID' },
    { name: 'lastName', title: 'Last name' },
    { name: 'firstName', title: 'First name' },
    { name: 'middleName', title: 'Middle name' },
    { name: 'age', title: 'Age' }
];

const defaultColumnWidths = [
    { columnName: 'id', width: 100 },
    { columnName: 'lastName', width: 200 },
    { columnName: 'firstName', width: 200 },
    { columnName: 'middleName', width: 200 },
    { columnName: 'age', width: 100 }
];

const Patients = () => {
    // 存储所有患者数据
    const [allPatients, setPatients] = useState([]);
    // 存储选中行的id数组
    const [selectedRowIds, setSelectedRowIds] = useState([]);

    const getPatients = async () => {
        let params = {
            method: 'GET',
            headers: new Headers()
        };
        const result = await fetch(URL, params);

        if (result.ok) {
            const patients = await result.json();
            setPatients(patients);
            return patients;
        }

        return [];
    };

    useEffect(() => {
        getPatients();
    }, []);

    // 获取规范的选中行对象数组
    const getSelectedPatients = () => {
        return allPatients.filter(patient => selectedRowIds.includes(patient.id));
    };

    const AddHandler = () => { alert("add"); };
    const EditHandler = () => { 
        const selected = getSelectedPatients();
        console.log('选中的患者：', selected);
        alert("edit"); 
    };
    const RemoveHandler = () => { 
        const selected = getSelectedPatients();
        console.log('要删除的患者：', selected);
        alert("remove"); 
    };

    return (
        <div style={{width:'100%'}}>
            <div>
                <BaseToolbar
                    onAdd={AddHandler}
                    onEdit={EditHandler}
                    onRemove={RemoveHandler}
                ></BaseToolbar>
            </div>
            <div style={{border: '1px LightGrey solid'}}>
                <Grid
                    rows={allPatients}
                    columns={columns}
                    rowKey="id" // 指定行的主键字段
                >
                    <SelectionState
                        selection={selectedRowIds}
                        onSelectionChange={setSelectedRowIds}
                    />
                    <SortingState
                        defaultSorting={[{ columnName: 'id', direction: 'asc' }]}
                        columnExtensions={[{ columnName: 'age', sortingEnabled: false}]}
                    />
                    <IntegratedSorting />
                    <IntegratedSelection />
                    <Table />
                    <TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
                    <TableHeaderRow showSortingControls />
                    <TableSelection showSelectAll />
                </Grid>
            </div>
        </div>
    );
}

export default Patients;

关键修改点说明 #

• 新增selectedRowIds状态专门存储选中行的id数组，不再和患者数据源混用
• Grid组件添加rowKey="id"属性，明确行的主键字段
• 新增getSelectedPatients方法，通过选中的id筛选出完整的患者对象数组，便于后续编辑/删除操作
• 在编辑、删除操作的回调中可以直接调用getSelectedPatients()获取规范的选中行数据

内容的提问来源于stack exchange，提问作者Anton Bobylev