在React Redux应用中计算购物车商品总价的指南

import { useSelector } from 'react-redux';

// 在你的组件内部
const cartItems = useSelector((state) => state.cart.items);

const newTotal = cartItems.reduce((accumulator, currentItem) => {
  return accumulator + (currentItem.qty * currentItem.price);
}, 0); // 初始值设为0

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';

const CartComponent = () => {
  const cartItems = useSelector((state) => state.cart.items);
  const [totalPrice, setTotalPrice] = useState(0.0); // 使用useState管理总价状态

  useEffect(() => {
    if (cartItems && cartItems.length > 0) {
      const newTotal = cartItems.reduce((accumulator, currentItem) => {
        return accumulator + (currentItem.qty * currentItem.price);
      }, 0);
      setTotalPrice(newTotal);
    } else {
      setTotalPrice(0.0); // 购物车为空时，总价为0
    }
  }, [cartItems]); // 依赖项数组：当cartItems变化时重新运行

  // ... 组件的渲染逻辑
};

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { NavLink } from 'react-router-dom'; // 假设使用了react-router-dom

const CartComponent = () => {
  // 从Redux store获取购物车商品列表
  const cartItems = useSelector((state) => state.cart.items);
  // 使用useState管理总价状态
  const [totalPrice, setTotalPrice] = useState(0.0);

  // 使用useEffect监听购物车商品变化，并重新计算总价
  useEffect(() => {
    if (cartItems && cartItems.length > 0) {
      const newTotal = cartItems.reduce((accumulator, currentItem) => {
        // 确保currentItem.qty和currentItem.price是有效的数字
        const qty = typeof currentItem.qty === 'number' ? currentItem.qty : 0;
        const price = typeof currentItem.price === 'number' ? currentItem.price : 0;
        return accumulator + (qty * price);
      }, 0);
      setTotalPrice(newTotal);
    } else {
      setTotalPrice(0.0); // 购物车为空时，总价为0
    }
  }, [cartItems]); // 依赖项数组：当cartItems引用变化时重新运行

  // 假设Decrement和addIncrement是用于更新商品数量的action dispatch函数
  // 例如: const dispatch = useDispatch(); const Decrement = (item) => dispatch(decrementQty(item));

  return (
    <div className='container py-4 my-5'>
      {cartItems.length === 0 ? (
        <p>
          购物车为空，<NavLink to='/'>继续购物</NavLink>
        </p>
      ) : (
        cartItems.map((cartItem) => {
          return (
            <div className='row py-5 border-bottom' key={cartItem.id}> {/* 务必添加key属性 */}
              <div className='col-md-4'>
                <img
                  src={cartItem.image}
                  alt={cartItem.title}
                  style={{ width: '100%', height: '300px', objectFit: 'contain' }}
                />
              </div>
              <div className='col-md-4'>
                <h3> {cartItem.title} </h3>
                <p className='lead'> {cartItem.description} </p>
                <p>数量: {cartItem.qty}</p>
                <strong className='lead fw-bold'>
                  价格: {(cartItem.price * cartItem.qty).toFixed(2)}{' '} {/* 单项总价也格式化 */}
                </strong>

                <div className='mt-4'>
                  <button
                    className='btn btn-outline-dark me-4'
                    // onClick={() => Decrement(cartItem)} // 假设已定义Decrement函数
                  >
                    <i className='fa fa-minus'></i>
                  </button>
                  <button
                    className='btn btn-outline-dark'
                    // onClick={() => addIncrement(cartItem)} // 假设已定义addIncrement函数
                  >
                    <i className='fa fa-plus'></i>
                  </button>
                </div>
              </div>
            </div>
          );
        })
      )}

      <div className='checkout'>
        <h2 className='my-4'>总价: {totalPrice.toFixed(2)}</h2> {/* 格式化总价为两位小数 */}
        <button className='btn btn-outline-dark px-5 py-2 green'>去结算</button>
      </div>
    </div>
  );
};

export default CartComponent;