antd中嵌套表格，子表格數據相同的問題解決（hook寫法）

相信很多朋友在使用antd的嵌套表格的時候都碰到了這個問題，本人也深有體會，簡直愁的不行，不過在經過和百度的一番爭斗之后，終於是找到的問題的原因所在。

首先，antd的表格數據源dataSource接收的是一個數組，如果我們子表格每次接收的數組都是一個單獨的新的數組，那么就會造成所有的子表格都是一樣的，因為每次展開只渲染了這一個數組

 

那么我們就要把每次請求到的子表格數據給存起來了，這里我用的是對象鍵值對的方式去存儲的

因為沒有后台數據，所以我這邊就先模擬了一些數據

const ChildrenDataOne = [
  { name: 'XiaoHua1', age: 15, address: 'ZhengZhou', key: 0 },
  { name: 'XiaoHua2', age: 15, address: 'ZhengZhou', key: 1 },
  { name: 'XiaoHua3', age: 15, address: 'ZhengZhou', key: 2 },
]
const ChildrenDataTwo = [
  { name: 'XiaoBai1', age: 15, address: 'ZhengZhou', key: 0 },
  { name: 'XiaoBai2', age: 15, address: 'ZhengZhou', key: 1 },
  { name: 'XiaoBai3', age: 15, address: 'ZhengZhou', key: 2 },
]
const ChildrenDataThree = [
  { name: 'XiaoHei1', age: 15, address: 'ZhengZhou', key: 0 },
  { name: 'XiaoHei2', age: 15, address: 'ZhengZhou', key: 1 },
  { name: 'XiaoHei3', age: 15, address: 'ZhengZhou', key: 2 },
]
const ChildrenDataFour = [
  { name: 'XiaoLan1', age: 15, address: 'ZhengZhou', key: 0 },
  { name: 'XiaoLan2', age: 15, address: 'ZhengZhou', key: 1 },
  { name: 'XiaoLan3', age: 15, address: 'ZhengZhou', key: 2 },
]

這個方法每次點擊展開按鈕時會把相對應的數據存入到 data 這個對象中，大概效果是 { 1: [ 數據 ], 3: [  數據 ], 2: [  數據 ] }

  const openClick = (status, item) => { // status(子表格展開的狀態) item(當前項)
    if (!status) return 
　　 // 判斷 如果子表格收起時 直接退出當前函數，不進行請求存儲
    if (item.Cid === 1) {
      setData({ ...data, [item.Cid]: ChildrenDataOne })
    }
    if (item.Cid === 2) {
      setData({ ...data, [item.Cid]: ChildrenDataTwo })
    }
    if (item.Cid === 3) {
      setData({ ...data, [item.Cid]: ChildrenDataThree })
    }
    if (item.Cid === 4) {
      setData({ ...data, [item.Cid]: ChildrenDataFour })
    }
  }

 

好，現在我們有了所有展開的數據，但是因為存儲到對象里面，所以我們還需要一個 唯一值（id）每次取匹配我們存儲到對象里面的數據

這個方法是渲染子表格用的，它第一個參數是所有展開的對應的數據，我們就可以從這些數據中取到唯一值（id）

可能有小伙伴疑問了為什么要從這里取，因為它第一個參數輸出的是（所有展開的數據），也就是說我們可以拿到所有已展開的id，然后將對應的數據給放進去

我這邊也是踩過坑的，我每次展開的時候存了一個id，然后就導致了我雖然有每個展開的數據，但是沒有每個展開的id，就造成了都是一樣的數據

  const expandedRowRender = (item) => {
    return (
      <Table
        columns={ChildrenColumns}
        pagination={false}
        dataSource={data[item.Cid]}
      />
    )
  }

 

這里是全部的代碼，這邊是沒有使用 redux或者dva，僅僅是使用state在頁面上模擬了一下，不過思路是正確的，小伙伴們把思路看懂了，然后搬到redux/dva里面就可以了

import React, { useState } from 'react'
import { Table } from 'antd'
import {
  ParentData,
  ParentColumns,
  ChildrenColumns,
  ChildrenDataOne,
  ChildrenDataTwo,
  ChildrenDataThree,
  ChildrenDataFour,
} from './Sourse'
import './styles.less'

export default function App() {

  const [data, setData] = useState(null)

  const expandedRowRender = (item) => {
    return (
      // 子表格
      <Table
        columns={ChildrenColumns}
        pagination={false}
        dataSource={data[item.Cid]}
      />
    )
  }

  const openClick = (status, item) => {
    if (!status) return

    if (item.Cid === 1) {
      setData({ ...data, [item.Cid]: ChildrenDataOne })
    }
    if (item.Cid === 2) {
      setData({ ...data, [item.Cid]: ChildrenDataTwo })
    }
    if (item.Cid === 3) {
      setData({ ...data, [item.Cid]: ChildrenDataThree })
    }
    if (item.Cid === 4) {
      setData({ ...data, [item.Cid]: ChildrenDataFour })
    }
  }

  return (
    <div className="pages-app">
　　   // 父表格
      <Table
        className="components-table-demo-nested"
        columns={ParentColumns}
        expandable={{ expandedRowRender }} // 渲染子表格的回調
        dataSource={ParentData} 
        onExpand={openClick} // 展開時觸發的回調
      />
    </div>
  )

}