fix: mergeColumns edge case

#37

example/src/2023-1-10/index.tsx

@@ -0,0 +1,131 @@
+import { Table } from 'antd'
+import useARH from '@minko-fe/use-antd-resizable-header'
+import '@minko-fe/use-antd-resizable-header/dist/style.css'
+import React, { useEffect, useMemo, useState } from 'react'
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+    width: 100,
+    ellipsis: true,
+    fixed: 'left',
+    filters: [
+      {
+        text: 'Joe',
+        value: 'Joe',
+      },
+      {
+        text: 'John',
+        value: 'John',
+      },
+    ],
+    onFilter: (value, record) => record.name.indexOf(value) === 0,
+  },
+  {
+    title: 'Other',
+    children: [
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+        width: 150,
+        sorter: (a, b) => a.age - b.age,
+      },
+      {
+        title: 'Address',
+        children: [
+          {
+            title: 'Street',
+            dataIndex: 'street',
+            key: 'street',
+            width: 150,
+          },
+          {
+            title: 'Block',
+            children: [
+              {
+                title: 'Building',
+                dataIndex: 'building',
+                key: 'building',
+                width: 100,
+              },
+              {
+                title: 'Door No.',
+                dataIndex: 'number',
+                key: 'number',
+                width: 100,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Company',
+    children: [
+      {
+        title: 'Company Address',
+        dataIndex: 'companyAddress',
+        key: 'companyAddress',
+        width: 200,
+      },
+      {
+        title: 'Company Name',
+        dataIndex: 'companyName',
+        key: 'companyName',
+      },
+    ],
+  },
+  {
+    title: 'Gender',
+    dataIndex: 'gender',
+    key: 'gender',
+    width: 80,
+    fixed: 'right',
+  },
+]
+
+const data: any[] = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: 'John Brown',
+    age: i + 1,
+    street: 'Lake Park',
+    building: 'C',
+    number: 2035,
+    companyAddress: 'Lake Street 42',
+    companyName: 'SoftLake Co',
+    gender: 'M',
+  })
+}
+
+const ResizableTable = () => {
+  const [col, setCol] = useState<any>([])
+  useEffect(() => {
+    setTimeout(() => {
+      setCol(columns)
+    }, 200)
+  }, [])
+  const { components, resizableColumns, tableWidth } = useARH({
+    columns: useMemo(() => {
+      console.log(col)
+      return col
+    }, [col]),
+    columnsState: {
+      persistenceKey: '2023-1-10',
+      persistenceType: 'localStorage',
+    },
+  })
+
+  return (
+    <>
+      <Table columns={resizableColumns} dataSource={data} components={components} scroll={{ x: tableWidth }} />
+    </>
+  )
+}
+
+export default ResizableTable

example/src/main.tsx

@@ -2,8 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 // import App from './App'
-import CodeBox from './CodeBox'
+// import CodeBox from './CodeBox'
+import ResizableTable from './2023-1-10'
 
 const root = ReactDOM.createRoot(document.getElementById('root')!)
 
-root.render(<CodeBox />)
+root.render(<ResizableTable />)

src/utils/useLocalColumns.ts

@@ -11,9 +11,9 @@ interface LocalColumnsProp<T> {
 
 function mergeColumns<T extends any[]>(src: T, target: T, mergeKey: string): T {
   const res = src
-  if (Array.isArray(res)) {
-    res.forEach((t, i) => {
-      if (t.children) {
+  if (Array.isArray(res) && Array.isArray(target)) {
+    res.forEach((t?, i?) => {
+      if (t?.children) {
         mergeColumns(t.children, target[i]?.children, mergeKey)
       } else {
         res[i][mergeKey] = target[i]?.[mergeKey]
@@ -47,8 +47,7 @@ function useLocalColumns<T extends ColumnOriginType<T>>({
     try {
       const localResizableColumns = JSON.parse(storage?.getItem(persistenceKey) || '{}')?.resizableColumns
 
-      const x = mergeColumns<T[]>(columnsProp || [], localResizableColumns, 'width')
-      return x
+      return mergeColumns<T[]>(columnsProp || [], localResizableColumns, 'width')
     } catch (error) {
       console.error(error)
     }