如何计算React Redux中的所有addTocart产品总价

Question

<div className='container py-4 my-5'>
  {item.length === 0 ? (
    <p>
      cart is empty, <NavLink to='/'>continoue shopping</NavLink>
    </p>
  ) : (
    item.map((cart) => {
      return (
        <div className='row py-5 border-bottom'>
          <>
            <div className='col-md-4'>
              <img
                src={cart.image}
                alt=''
                style={{ width: '100%', height: '300px', objectFit: 'contain' }}
              />
            </div>
            <div className='col-md-4'>
              <h3> {cart.title} </h3>
              <p className='lead'> {cart.description} </p>
              <p>Quantity: {cart.qty}</p>
              <strong className='lead fw-bold'>
                {' '}
                price: {cart.price * cart.qty}{' '}
              </strong>

              <div className='mt-4'>
                <button
                  className='btn btn-outline-dark me-4'
                  onClick={() => Decrement(cart)}
                >
                  <i className='fa fa-minus'></i>
                </button>
                <button
                  className='btn btn-outline-dark'
                  onClick={() => addIncrement(cart)}
                >
                  <i className='fa fa-plus'></i>
                </button>
              </div>
            </div>
          </>
        </div>
      );
    })
  )}

  <div className='checkout'>
    <h2 className='my-4'>total price: </h2>
    <button className='btn btn-outline-dark px-5 py-2 green'>Checkout</button>
  </div>
</div>;

我正在使用简单的反应显示在购物车组件中的产品，我只是让如何计算所有购物车产品的总价格感到困惑。它是一个基于REDUX的Application，我正在从“通过MAP功能中的CART组件中使用Eletrector”获取数据。是否有可能仅计算所有我只是添加的所有购物车的总价格。”

Answer 1

您可以使用降低函数来计算总价：

const [total, setTotal] = useState(0.0);

useEffect(() => {
    // Update total when item qty changes
    const newTotal = item.reduce((a,b) => (a.qty * a.price) + (b.qty * b.price));
    setTotal(newTotal)
}, [item]) 

...

<div className='checkout'>
    <h2 className='my-4'>total price: {total}</h2>
    <button className='btn btn-outline-dark px-5 py-2 green'>Checkout</button>
</div>