Javascript 如何在react中汇总渲染组件中的数据？

我想把属于同一个

trained_at

字符串的权重和重复的每次乘法相加。目前，我通过比较组件渲染部分中的当前日期字符串和前一个日期字符串来实现日期的“分组”

在我的代码示例中，您可以在这里找到一个

求和

注释，我想在这里呈现计算结果

我的示例数据来自real应用程序中的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
________________

_________________
20200918 | 720您需要首先对项目重新分组并计算总和，然后显示它们

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;

从“React”导入React；
函数组和计算（数据）{
常量映射=数据减少（（acc，项目）=>{
const key=项。在；
让组=acc.get（键）；
如果（！组）{
组={trained_at:key，sum:0，items:[]}；
acc.set（键、组）；
}
分组.项目.推送（项目）；
group.sum+=item.weights*item.repeats；
返回acc；
}，新地图（））；
返回数组.from（map.values（））；
}
函数列表（）{
/*样本数据：*/
常数集=[
{
id:1，
培训地点：20200918，
体重：20，
重复：12，
},
{
id:2，
培训地点：20200918，
体重：20，
重复：12，
},
{
id:3，
培训地点：20200918，
体重：20，
重复：12，
},
{
id:4，
培训地点：20200916，
体重：15，
重复：12，
},
{
id:5，
培训地点：20200916，
体重：15，
重复：12，
},
{
id:6，
培训地点：20200916，
体重：15，
重复：12，
},
];
返回(
{groupAndCalc（set）.map（（组）=>{
返回(
{group.trained_at}
{group.sum}
{group.items.map（（行）=>(
{row.weights}
{row.repeats}
))}
);
})}
);
}
导出默认列表；
这些数字令人困惑
20*12+20*12+20*12=720
但在您的示例中，它表示
900
。是的，这就是问题所在！：我纠正了它，所以没有人会感到困惑。谢谢你的提示，天才！太好了。只有一件事：groupAndCalc函数反转集合数据的顺序。我怎么能避免呢？不，它没有颠倒。哦，你的意思是组中的列车是反转的，这是出乎意料的…让我来解决这个问题。请参阅更新，我使用
Map
而不是普通对象，现在顺序正确了。
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;