基于数组值初始化MUI DataGrid的复选框选中状态

你的问题出在selectionModel的初始化逻辑上，错误地将所有行ID加入了选中集合，导致全选。只需按以下方式修正：

核心修正逻辑 #

从城市数据源中筛选出ID存在于userMockup.cities数组中的项，提取它们的ID作为初始选中值。

代码示例 #

假设你的城市数据数组为cityData，修改selectionModel的初始化代码：

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

const userMockup = {
  id: 1,
  name: "Citizen 1",
  cities: [1, 2],
  isAlive: true
};

// 示例城市数据
const cityData = [
  { id: 1, name: "城市A" },
  { id: 2, name: "城市B" },
  { id: 3, name: "城市C" }
];

export default function CityGrid() {
  // 正确初始化选中模型：仅选中userMockup.cities中的ID对应的行
  const [selectionModel, setSelectionModel] = useState(
    cityData.filter(city => userMockup.cities.includes(city.id)).map(city => city.id)
  );

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={cityData}
        columns={[
          { field: 'id', headerName: 'ID', width: 70 },
          { field: 'name', headerName: '城市名称', width: 150 }
        ]}
        checkboxSelection
        selectionModel={selectionModel}
        onSelectionModelChange={(newModel) => setSelectionModel(newModel)}
      />
    </div>
  );
}

关键说明 #

• 用filter方法筛选出与userMockup.cities匹配的城市项，再用map提取ID，得到正确的初始选中集合。
• 确保checkboxSelection属性已开启，这是行多选的前提。

内容的提问来源于stack exchange，提问作者Lucas Fernandez