对 table 内的数字求和

Question

谁能帮我如何对 React.js 中 table 内的数字求和？

我的情况是我有产品 table，产品内部有 header 列 (no, product name, quantity, actual price, total price)。

截图如下：

下面是我的object：

下面是我的代码（简化版）：

 <h5 className="uppercase fw-bold mt-3">Produk</h5>
      <table className="table table-borderless">
        <thead>
          <tr>
            <th className="border">No</th>
            <th className="border">Produk</th>
            <th className="border">Quantity</th>
            <th className="border">Harga Satuan</th>
            <th className="border">Jumlah (Rp)</th>
          </tr>
        </thead>
        <tbody>
          {listProduct?.map((el, i) => {
            return (
              <tr key={i}>
                <td className="border">{i + 1}</td>
                <td className="border">{el.Product.name}</td>
                <td className="border">{el.quantity}</td>
                <td className="border">{el.price}</td>
                <td className="border">{+el.quantity * el.price}</td>
              </tr>
            );
          })}

          {/* <tr>
            <td colSpan={3}></td>
            <td className="border">
              Subtotal ({listProduct?.length} orderDetail)
            </td>
            {listProduct?.map((el, i) => {
              let sum = 0;
              sum += Number(el.price);
              return (
                <td key={i} className="border">
                  {sum}
                </td>
              );
            })}
          </tr> */}

          <tr>
            <td colSpan={3}></td>
            <td className="border">
              Subtotal ({listProduct?.length} orderDetail)
            </td>
            <td className="border">{"-"}</td>
          </tr>
          <tr>
            <td colSpan={3}></td>
            <td className="border">Shipping Fee</td>
            <td className="border">{orderDetail?.deliveryFee}</td>
          </tr>
          <tr>
            <td colSpan={3}></td>
            <td className="border">Discount</td>
            <td className="border">{"-"}</td>
          </tr>
          <tr>
            <td colSpan={3}></td>
            <td
              className="border uppercase"
              style={{
                backgroundColor: "#8FE5E1",
              }}
            >
              Total
            </td>
            <td
              className="border"
              style={{
                backgroundColor: "#8FE5E1",
              }}
            >
              {"-"}
            </td>
          </tr>
        </tbody>
      </table>

我期待的是 Subtotal -> 20000+5000 = 25000 和 Total -> 25000+9000 = 34000，如果有折扣那么 Total - Discount。

Answer 1

您应该使用 reduce 而不是 map 来循环 listProduct 项并对它们的所有总值求和。

const subTotal = listProduct.reduce((acc, product) => {
    return acc + product.price * product.quantity;
}, 0);

小计行将如下所示。

<tr>
    <td colSpan={3}></td>
    <td className="border">
        Subtotal ({listProduct?.length} orderDetail)
    </td>
    <td key={i} className="border">
        {subTotal}
    </td>
</tr>

您也可以使用 subTotal 值来计算最终的总金额。

<tr>
    <td colSpan={3}></td>
    <td className="border uppercase" style={{ backgroundColor: "#8FE5E1" }}>
        Total
    </td>
    <td className="border" style={{ backgroundColor: "#8FE5E1" }}>
        {subTotal + orderDetail?.deliveryFee}
    </td>
</tr>

对 table 内的数字求和

Sum numbers inside a table

javascript

sum

reactjs