接口拿到的数据[{id: 5, amount: 2, pool: 1, name: '王哲林} {id: 3, amount: 200, pool: 3, name: '贺希宁'} {id: 2, amount: 200, pool: 2, name: '史鸿飞'} {id: 1, amount: 100, pool: 1, name: '张宁'}]数组根据pool值得不同渲染分别渲染几个table表格的例子 使用react hooks+antd的table
时间: 2024-03-16 13:46:16 浏览: 21
好的,这是一个很好的问题!
首先,您需要使用React Hooks来创建状态,以保存您的数据。然后,您可以使用Antd的Table组件来渲染表格。最后,您需要编写一些逻辑来根据池值将数据分组,然后将每个组映射到单独的表格。
下面是一个简单的示例代码,以便您了解如何实现此操作:
```jsx
import React, { useState, useMemo } from 'react';
import { Table } from 'antd';
const data = [
{ id: 5, amount: 2, pool: 1, name: '王哲林' },
{ id: 3, amount: 200, pool: 3, name: '贺希宁' },
{ id: 2, amount: 200, pool: 2, name: '史鸿飞' },
{ id: 1, amount: 100, pool: 1, name: '张宁' }
];
const App = () => {
const [tableData] = useState(data);
const groupedData = useMemo(() => {
return tableData.reduce((groups, item) => {
const pool = item.pool;
groups[pool] = groups[pool] || [];
groups[pool].push(item);
return groups;
}, {});
}, [tableData]);
const columns = [
{ title: 'ID', dataIndex: 'id' },
{ title: 'Amount', dataIndex: 'amount' },
{ title: 'Name', dataIndex: 'name' }
];
return (
<div>
{Object.keys(groupedData).map((pool) => (
<Table
key={pool}
columns={columns}
dataSource={groupedData[pool]}
title={() => `Pool ${pool}`}
/>
))}
</div>
);
};
export default App;
```
在这个示例中,我们首先将数据保存在状态中。然后,我们使用useMemo Hook来计算分组数据,这个分组数据是一个对象,其中键是池值,值是该池中的数据数组。接下来,我们定义了表格的列,并使用Object.keys和map函数将每个分组映射到一个单独的表格中。每个表格都有自己的标题,标题中包含池值。
我希望这个示例对您有所帮助!