你可以使用以下代码实现前端React组件中的循环分组
求和功能：
```jsx
import React from 'react';
class GroupSum extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ id: 1, paymentBank: 'A', disbursalBank: 'A', amount: 100 },
{ id: 2, paymentBank: 'B', disbursalBank: 'A', amount: 200 },
{ id: 3, paymentBank: 'A', disbursalBank: 'B', amount: 300 },
{ id: 4, paymentBank: 'B', disbursalBank: 'B', amount: 400 },
],
groupedData: [],
};
}
componentDidMount() {
this.groupData();
}
groupData = () => {
const { data } = this.state;
const groupedData = [];
for (let i = 0; i < data.length; i++) {
const currentData = data[i];
let merged = false;
for (let j = i + 1; j < data.length; j++) {
const nextData = data[j];
if (
currentData.paymentBank === nextData.paymentBank &&
currentData.disbursalBank === nextData.disbursalBank
) {
currentData.amount += nextData.amount;
merged = true;
}
}
if (!merged) {
groupedData.push(currentData);
}
}
this.setState({ groupedData });
};
render() {
const { groupedData } = this.state;
return (
<div>
<h2>Grouped Data:</h2>
<ul>
{groupedData.map((item) => (
<li key={item.id}>
{item.paymentBank} - {item.disbursalBank}: {item.amount}
</li>
))}
</ul>
</div>
);
}
}
export default GroupSum;
```
上述代码中，我们使用了React的类组件`GroupSum`来展示分组
求和的功能。在`constructor`中，我们初始化了包含
多条数据的`data`数组，每条
数据都有`id`、`paymentBank`、`disbursalBank`和`amount`属性。我们还定义了一个空数组`groupedData`来存储分组
求和后的
数据。
在`componentDidMount`生命周期方法中，我们调用了`groupData`方法来进行循环分组
求和操作。该方法使用了两个嵌套的`for`循环来对比
数据并
合并金额。最后，将未
合并的
数据添加到`groupedData`数组中，并通过`setState`更新组件的状态。
在`render`方法中，我们通过遍历`groupedData`数组来展示分组
求和后的
数据。每个
数据项都以列表项的形式显示。
你可以在你的React应用程序中使用这个组件来实现循环分组
求和的功能。记得根据你的实际需求修改
数据和样式。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
