將map內創建的值推送到新陣列中以減少

我有一個地圖功能，在地圖運行之前，我進行計算以獲得折扣，然后將折扣從當前價格中減去。

這可以很好地顯示折扣和新價格，但我需要能夠獲取所有最終價格（當前價格 - 折扣）并為購物車創建總計。

我的想法是我可以在 finalPrice 上使用 reduce，但由于它在吐出時不在陣列中（他們推出了 seperatley），我無法在它們上運行 reduce 函式來獲得我被告知的總數 reduce.finalPrice 不是一個函式。如何將最終價格推入一個陣列以降低？

          {User?.Cart && User?.Cart.length > 0 && (
            <>
              <table className="w-full table-auto">
                <thead>
                  <tr className="text-left border-b-2 border-baileysBlue">
                    <th className="py-5">Product</th>
                    <th className="py-5">Price</th>
                    <th className="py-5">Discount</th>
                    <th className="py-5">Final Price</th>
                    <th className="py-5">Quantity</th>
                    <th className="py-5">Controls</th>
                  </tr>
                </thead>
                <tbody>
                  {User.Cart.map((prod, i) => {
                    let discountPrice = prod.CurrentPrice.toString().endsWith('97') ? parseFloat(prod.CurrentPrice) * 0.05 : parseFloat(prod.CurrentPrice) * 0.15
                    let finalPrice = parseFloat(prod.CurrentPrice) - parseFloat(discountPrice)
                    console.log(finalPrice)
                    return (
                      <tr
                        key={`key-cart-prod-${i}`}
                        className="border-b border-opacity-50 border-baileysBlue"
                      >
                        <td className="py-5">
                          <Link href={`/product/${prod.Slug}`}>
                            <a>
                              {`${prod.Description} (${prod.ProductID})`}
                            </a>
                          </Link>
                        </td>
                        <td className="py-5">{`${prod.CurrentPrice}`}</td>
                        <td className="py-5">{`${discountPrice}`}</td>
                        <td className="py-5">{`${finalPrice}`}</td>
                        <td className="py-5">{`Qty: ${prod.Quantity}`}</td>
                        <td className="py-5" style={{width: '1%', whiteSpace: 'nowrap'}}>
                          <RemoveFromCart ProductID={prod.ProductID} />
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

編輯

嘗試一下，但仍然讓他們推動單獨的陣列

             {User.Cart.map((prod, i) => {
                    let totals = [];
                    for (let i = 0; i < prod.Quantity; i  ) {
                      let discountPrice = prod.CurrentPrice.toString().endsWith('97') ? parseFloat(prod.CurrentPrice) * 0.05 : parseFloat(prod.CurrentPrice) * 0.15
                      let finalPrice = parseFloat(prod.CurrentPrice) - parseFloat(discountPrice)
                      totals.push(finalPrice)
                    }
                    console.log('totals', totals)

uj5u.com熱心網友回復：

您可以創建一個單獨的陣列，然后附加finalPrice到該陣列，然后最后使用.reduce()對陣列求和并使用它。

let prices = [];

User.Cart.map((prod, i) => {
    let discountPrice = prod.CurrentPrice.toString().endsWith('97') ? 
    parseFloat(prod.CurrentPrice) * 0.05 : parseFloat(prod.CurrentPrice) * 0.15
    let finalPrice = parseFloat(prod.CurrentPrice) - parseFloat(discountPrice)
    console.log(finalPrice)
    prices.append(finalPrice);
    // rest of map function here
});

let total = prices.reduce((acc, cv) => acc   cv);
console.log(total);

uj5u.com熱心網友回復：

您可以在 .map() 中添加價格，

let total = 0;

User.Cart.map((prod, i) => {
    let discountPrice = prod.CurrentPrice.toString().endsWith('97') ? 
    parseFloat(prod.CurrentPrice) * 0.05 : parseFloat(prod.CurrentPrice) * 0.15
    let finalPrice = parseFloat(prod.CurrentPrice) - parseFloat(discountPrice)
    console.log(finalPrice)
    total = total   finalPrice;
    // rest of map function here
});

console.log(total);

uj5u.com熱心網友回復：

這是一個建模問題。您正在嘗試對標記內的原始陣列進行操作，這可能有點令人困惑。

嘗試在組件上的 JSX 之前對資料進行建模，方法是

const cart = (User?.Cart || []).map((prod) => {
  const discount = ...
  const finalPrice = prod.currentPrice - discount;

  return {
    ...prod,
    discount,
    finalPrice,
  };
});

然后，很容易評估總數

const total = cart.reduce((total, prod) => prod.finalPrice, 0);

然后，在您的 JSX 上，您可以隨意使用這些變數。

標籤：javascript 反应

上一篇：重繪時重置本地存盤

下一篇：具有不同顏色javascript的矩陣