Javascript 从表中计算总和

我有下表

<table>
              <thead>
                <tr>
                  <th>&nbsp;</th>
                  <th>Available</th>
                  <th>Incoming</th>
                  <th>On Hand</th>
                  <th>Outgoing</th>
                </tr>
              </thead>
              <tbody>
                {Object.entries(text).map(([key, value]) => {
                  return (
                    <>
                      <tr key={key}>
                        <td>
                          <TextField strong>{`${key}`}</TextField>
                        </td>
                        <td>{`${value["Available"]}`}</td>
                        <td>{`${value["Incoming"]}`}</td>
                        <td>{`${value["On Hand"]}`}</td>
                        <td>{`${value["Outgoing"]}`}</td>
                      </tr>
                    </>
                  );
                })}
                <tr>
                  <td>Total</td>
                </tr>
              </tbody>
            </table>

我正在映射项以呈现这样的列表

          availabe | Incoming | On Hand | Outgoing
itemName1  0        | 2        | 4       | 10 
itemName2  0        | 4        | 1       | 9 
itemName3  3        | 2        | 0       | 0

我想在最后添加另一行，如下所示

          availabe | Incoming | On Hand | Outgoing
itemName1  0        | 2        | 4       | 10 
itemName2  0        | 4        | 1       | 9 
itemName3  3        | 2        | 0       | 0
---------------------------------------------------
total      3        | 8        | 5       | 19 

我将如何实现这一点。因为total在映射数组之外。

---

请帮忙。谢谢。

您可以再次使用

text

对象，如下所示：

const text={
项目名称1：{
传入：5，
现有：10，
离任：15，
可供选择：20，
},
项目名称2：{
传入：10，
现有：20，
离任时间：30，
可供选择：40，
}
}
let available=Object.values（text）.map（（item）=>item.available）.reduce（（a，b）=>a+b，0）；
让incoming=Object.values（text）.map（（item）=>item.incoming）.reduce（（a，b）=>a+b，0）；
让onhand=Object.values（text）.map（（item）=>item.onhand）.reduce（（a，b）=>a+b，0）；
让outing=Object.values（text）.map（（item）=>item.outing）.reduce（（a，b）=>a+b，0）；
console.log（'Available:'，Available）
console.log（'传入：'，传入）
console.log（'Onhand:'，Onhand）
console.log（'Outgoing:'，Outgoing）

您可以在以下内容中找到总计，然后使用它作为项目值：

const text={“itemName1”：{“传入”：0，“手头”：2，“传出”：4，“可用”：10}，“itemName2”：{“传入”：0，“手头”：4，“传出”：1，“可用”：9}，“itemName3”：{“传入”：3，“手头”：2，“传出”：0，“可用”：0}；
常量数组_unique=（数组）=>[…（新集合（数组））]；
const object_merge=（merge_fn，obj1，obj2）=>{
const all_keys=array_unique（Object.keys（obj1）.concat（Object.keys（obj2））；
返回所有_键。减少(
（acc，key）=>Object.assign（acc，{[key]：merge_fn（obj1[key]，obj2[key]）），
{}
);
};
常数merge_sum=（val1，val2）=>（val1±0）+（val2±0）；
const object_merge_sum=（obj1，obj2）=>object_merge（merge_sum，obj1，obj2）；
const get_总计=（项目）=>
对象。条目（项目）
.reduce（（acc，[[uu，value]）=>object\u merge\u sum（acc，value），{}）；
日志（获取总计（文本））您的两个示例是相同的。其中一个是否应该有一个额外的行？@JeffB抱歉，编辑了这个问题。你能举一个
文本
值的例子吗。如果总计出现在另一个值中，请将其添加。@F.Igor文本的定义如下：有总计。{itemName1:{传入：1，现存：1，传出：1，可用：1，}，itemName2:{传入：1，现存：1，传出：1，可用：1，}，请查看编辑后的问题
          availabe | Incoming | On Hand | Outgoing
itemName1  0        | 2        | 4       | 10 
itemName2  0        | 4        | 1       | 9 
itemName3  3        | 2        | 0       | 0
---------------------------------------------------
total      3        | 8        | 5       | 19