Merge pull request #2790 from XiaoMi/hotfix/table/2789

fix(table): 修复全选时 onChange 第 4 个参数返回 undefined 问题 (#2789)
XiaoMi · Apr 12, 2024 · 34fe503 · 34fe503
2 parents 514873e + 86a096b
commit 34fe503
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/.changeset/curly-pans-matter.md b/.changeset/curly-pans-matter.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(table): 修复全选时 onChange 第 4 个参数返回 undefined 问题
diff --git a/.changeset/lucky-plums-greet.md b/.changeset/lucky-plums-greet.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/table": patch
+---
+
+fix: 修复全选时 onChange 第 4 个参数返回 undefined 问题
diff --git a/packages/ui/table/src/hooks/use-check.ts b/packages/ui/table/src/hooks/use-check.ts
@@ -1,5 +1,5 @@
 import { useCheck } from '@hi-ui/use-check'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
 import { FlattedTableRowData, TableRowSelection } from '../types'
 
@@ -30,6 +30,12 @@ export const useTableCheck = ({
     rowSelection?.onChange
   )
 
+  useEffect(() => {
+    checkedRowDataItemsRef.current = checkedRowDataItemsRef.current.filter(({ key }) =>
+      checkedRowKeys?.includes(key)
+    )
+  }, [checkedRowKeys])
+
   // 已选中的行数据集合
   const checkedRowDataItemsRef = React.useRef<Record<string, any>[]>([])
   const checkedRowDataItems = checkedRowDataItemsRef.current
@@ -47,7 +53,9 @@ export const useTableCheck = ({
   const onCheckedRowKeysChange = React.useCallback(
     (rowItem: Record<string, any>, checked: boolean) => {
       // 记录选中的行数据集合
-      const nextCheckedDataItems = checkedRowDataItems
+      const nextCheckedDataItems = checkedRowDataItems.filter(({ key }) =>
+        checkedRowKeys.includes(key)
+      )
 
       if (checked) {
         if (!nextCheckedDataItems.find((item) => item[fieldKey] === rowItem[fieldKey])) {
@@ -61,7 +69,7 @@ export const useTableCheck = ({
 
       handleCheckedRowKeysChange(rowItem, checked)
     },
-    [checkedRowDataItems, fieldKey, handleCheckedRowKeysChange]
+    [checkedRowDataItems, checkedRowKeys, fieldKey, handleCheckedRowKeysChange]
   )
 
   // 判断是否全选
@@ -101,23 +109,34 @@ export const useTableCheck = ({
     const checkedRowKeysSet = new Set(checkedRowKeys)
 
     if (checkedAll) {
+      checkedRowDataItemsRef.current = checkedRowDataItemsRef.current.filter(
+        ({ key }) => !checkedRowKeysSet.has(key)
+      )
+
       // 移除当前页所有行 ids
       trySetCheckedRowKeys(
         (prev) => prev.filter((id) => !checkedRowKeysSet.has(id)),
         targetRowItems,
-        false
+        false,
+        checkedRowDataItemsRef.current
       )
+
       return
     }
 
+    checkedRowDataItemsRef.current = targetRowItems.concat(
+      checkedRowDataItemsRef.current.filter((item) => !checkedRowKeysSet.has(item.key))
+    )
+
     trySetCheckedRowKeys(
       // 添加当前页所有行 ids
       (prev) => {
         prev.forEach((id) => checkedRowKeysSet.add(id))
         return Array.from(checkedRowKeysSet)
       },
       targetRowItems,
-      true
+      true,
+      checkedRowDataItemsRef.current
     )
   }, [trySetCheckedRowKeys, flattedData, checkRowIsDisabledCheckbox, checkedAll])