javascript - react如何汇总渲染组件中的数据?
问题描述
我想总结属于同一trained_at
字符串的权重和重复的每个乘法。目前,我通过将当前日期字符串与组件渲染部分中的前一个日期字符串进行比较来实现日期的“分组”。
在我完全正常工作的代码示例中,您可以找到一条Sum here
注释,我想在其中呈现计算结果。
我的示例数据来自真实应用程序中的 Firestore,并且没有该计算。因此我需要在获取结果后进行计算。
这是我得到的渲染:
_________________
20200918 |
20 | 12
20 | 12
20 | 12
_________________
20200916 |
15 | 12
15 | 12
15 | 12
________________
这就是我想要完成的:
_________________
20200918 | 720 <--
20 | 12
20 | 12
20 | 12
_________________
20200916 | 540 <--
15 | 12
15 | 12
15 | 12
________________
这是我的代码:
import React from "react";
function List() {
/* Sample Data: */
const set = [
{
id: 1,
trained_at: "20200918",
weights: 20,
repeats: 12,
},
{
id: 2,
trained_at: "20200918",
weights: 20,
repeats: 12,
},
{
id: 3,
trained_at: "20200918",
weights: 20,
repeats: 12,
},
{
id: 4,
trained_at: "20200916",
weights: 15,
repeats: 12,
},
{
id: 5,
trained_at: "20200916",
weights: 15,
repeats: 12,
},
{
id: 6,
trained_at: "20200916",
weights: 15,
repeats: 12,
},
];
return (
<table>
{set.map((row, i) => {
const previous = set[i - 1] !== undefined ? set[i - 1] : {};
return (
<React.Fragment key={row.id}>
{row.trained_at !== previous.trained_at ? (
<tr>
<td>{row.trained_at}</td>
<td>{/* Sum here */}</td>
</tr>
) : (
<></>
)}
<tr>
<td>{row.weights}</td>
<td>{row.repeats}</td>
</tr>
</React.Fragment>
);
})}
</table>
);
}
export default List;
解决方案
您需要首先重新分组项目并计算总和,然后显示它们。
import React from "react";
function groupAndCalc(data) {
const map = data.reduce((acc, item) => {
const key = item.trained_at;
let group = acc.get(key);
if (!group) {
group = { trained_at: key, sum: 0, items: [] };
acc.set(key, group);
}
group.items.push(item);
group.sum += item.weights * item.repeats;
return acc;
}, new Map());
return Array.from(map.values());
}
function List() {
/* Sample Data: */
const set = [
{
id: 1,
trained_at: "20200918",
weights: 20,
repeats: 12,
},
{
id: 2,
trained_at: "20200918",
weights: 20,
repeats: 12,
},
{
id: 3,
trained_at: "20200918",
weights: 20,
repeats: 12,
},
{
id: 4,
trained_at: "20200916",
weights: 15,
repeats: 12,
},
{
id: 5,
trained_at: "20200916",
weights: 15,
repeats: 12,
},
{
id: 6,
trained_at: "20200916",
weights: 15,
repeats: 12,
},
];
return (
<table>
{groupAndCalc(set).map((group) => {
return (
<React.Fragment key={group.trained_at}>
<tr>
<td>{group.trained_at}</td>
<td>{group.sum}</td>
</tr>
{group.items.map((row) => (
<tr key={row.id}>
<td>{row.weights}</td>
<td>{row.repeats}</td>
</tr>
))}
</React.Fragment>
);
})}
</table>
);
}
export default List;
推荐阅读
- nhibernate - NHibernate 和新创建的记录锁定
- javascript - Lodash 的“无”属性和输入数组
- angular - 在 Angular 中创建虚拟模型
- reactjs - 如何使用 jsdoc 记录 javascript 单元测试文件?
- javascript - 有没有办法用 Javascript 监听控制键(ASCII < 10)事件?
- git - 提取早于指定时间段的 GIT 分支列表
- php - 对于图像的每个像素,它将具有什么像素值?
- sql - Access 2013 - 使用每列的不同标准更新数据表
- mongodb - 如何使用 Mongodb 在 golang 中通过批量更新获取更新的文档 ID
- javascript - 将数组的值填充到复选框的布尔值