批量操作时如何高效处理选中状态和提交数据？

苗苗 Dev 提问于 2026-03-30 23:30:20 阅读 68

交互

我正在做一个后台管理页面，表格里有几百条数据，用户可以勾选多行然后批量删除或修改状态。现在的问题是：我用一个数组 selectedIds 存储选中的ID，但每次点击复选框都要遍历整个列表去更新状态，感觉性能很差，尤其数据一多就卡。

而且提交的时候，后端要求传的是完整对象数组，不是只传ID。我试过在提交时再根据ID去原数据里找对应对象，但代码很啰嗦还容易出错。有没有更优雅的方式？比如直接维护一个选中对象的数组？

const handleSelect = (id) => {
  if (selectedIds.includes(id)) {
    setSelectedIds(selectedIds.filter(item => item !== id));
  } else {
    setSelectedIds([...selectedIds, id]);
  }
};

批量操作

我来解答赞 9 收藏

反馈

1 条解答

a'ゞ倚凡 Lv1

当时我也卡在这，后来发现其实可以优化不少。首先别用数组存选中ID了，直接用对象来做映射会快得多。

你可以这样改造：用一个对象 selectedMap 来存储状态，键是 ID，值是布尔值表示是否选中。这样判断和更新都只需要 O(1) 的时间复杂度。

代码可以改成这样

const handleSelect = (id) => {

  setSelectedMap(prev => ({

    ...prev,

    [id]: !prev[id]

  }));

};

至于提交数据的问题，可以在组件渲染时维护一份选中对象的缓存。每次选中状态变化时同步更新这个缓存：

const getSelectedItems = () => {

  return data.filter(item => selectedMap[item.id]);

}

这样你就能随时拿到完整的选中对象列表了，不用每次都遍历去找。我当时就是这么改的，性能立马就上去了，代码也清爽了不少。折腾了好几天才想到这招，希望能帮到你。

2026-03-31 03:00