React TypeScript表格：组选择正常但单行选择异常问题

问题现象 #

• 点击「Libraries (0 of 1)」组选择框可正常选中该行；
• 点击「Software components (0 of 2)」组选择框能选中两行，但点击该组内单行时，会同时切换同组另一行的选中状态，不符合预期。

相关数据 #

[
    {
        "id": "6f16bc72-9747-4a2d-b165-14ef358762e6",
        "name": "diesel-south-ullam-photoshop",
        "version": "1.12.40",
        "visible": true,
        "category": "libraries",
        "status": "unselected",
        "searchQuery": "",
        "type": "",
        "filterStatus": {
            "status": "all",
            "category": "all"
        },
        "page": 1
    },
    {
        "id": "aaf6b8f8-0e7f-4420-87dc-fec9451d7935",
        "name": "coupe-when",
        "version": "1.14.8",
        "visible": true,
        "category": "software-components",
        "status": "unselected",
        "searchQuery": "",
        "type": "",
        "filterStatus": {
            "status": "all",
            "category": "all"
        },
        "page": 1
    },
    {
        "id": "3e8797e6-9da7-47d6-a7d6-c2828bf69989",
        "name": "wagon-not-classical",
        "version": "2.15.14",
        "visible": true,
        "category": "software-components",
        "status": "unselected",
        "searchQuery": "",
        "type": "",
        "filterStatus": {
            "status": "all",
            "category": "all"
        },
        "page": 1
    }
]

当前代码 #

TableRow 渲染代码 #

<OwcTableRow
  data-testid={`table-row-${elementIndex}`}
  key={row.id + "-123"}
  selectable
  selected={row.status === "selected"}
  onSelectChange={() => {
    const selectedCategoryItems = tableGroup
      .find((group) => group.key === row.category)
      .elements.filter((singleItem) => singleItem.visible);

    // Determine if all items in the category are currently selected
    const allSelected = selectedCategoryItems.every(
      (itemCat) => itemCat.status === "selected"
    );

    // Toggle the selection status of items within the category
    const updatedData = data.map((newItem) => {
      if (newItem.category === row.category) {
        return {
          ...newItem,
          status: allSelected ? "unselected" : "selected",
        };
      }
      return newItem;
    });

    setData(updatedData);
  }}>

Table Group 创建代码 #

const tableGroup = React.useMemo(
  (): Array<any> => [
    {
      key: 'libraries',
      label: tkeys.overview.libraries.cardTitle,
      elements: getByCategory('libraries'),
    },
    {
      key: 'software-components',
      label: tkeys.overview.softwareComponents.cardTitle,
      elements: getByCategory('software-components'),
    },
  ],
  [getByCategory, i18n.language, tkeys]);

问题原因 #

当前onSelectChange事件逻辑未区分组选择和单行选择：不管点击的是组选择框还是单行选择框，都会执行切换整个分类下所有项选中状态的操作，导致单行点击时错误影响同组其他项。

修复方案 #

1. 分离组选择与单行选择的逻辑 #

• 单行选择：仅切换当前行对应项的选中状态；
• 组选择：切换分类下所有可见项的选中状态。

2. 修改TableRow的单行选择逻辑 #

<OwcTableRow
  data-testid={`table-row-${elementIndex}`}
  key={row.id + "-123"}
  selectable
  selected={row.status === "selected"}
  onSelectChange={() => {
    // 仅切换当前行的选中状态
    const updatedData = data.map((newItem) => {
      if (newItem.id === row.id) {
        return {
          ...newItem,
          status: newItem.status === "selected" ? "unselected" : "selected",
        };
      }
      return newItem;
    });

    setData(updatedData);
  }}>

3. 为组选择框单独实现逻辑 #

// 组选择框的点击事件处理函数
const handleGroupSelect = (category: string) => {
  const selectedCategoryItems = tableGroup
    .find((group) => group.key === category)
    .elements.filter((singleItem) => singleItem.visible);

  const allSelected = selectedCategoryItems.every(
    (itemCat) => itemCat.status === "selected"
  );

  const updatedData = data.map((newItem) => {
    if (newItem.category === category && newItem.visible) {
      return {
        ...newItem,
        status: allSelected ? "unselected" : "selected",
      };
    }
    return newItem;
  });

  setData(updatedData);
};

4. 优化数据同步（可选） #

确保tableGroup的elements基于最新data生成，避免使用过时数据：

// 重写getByCategory，直接从当前data过滤
const getByCategory = (category: string) => {
  return data.filter(item => item.category === category && item.visible);
};

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