React购物车商品总价计算问题求助

我正在实现购物车功能，需要计算购物车中所选商品的总价。所选商品信息以数组形式存储在InCart状态中，示例数据如下：

{
  "id": 1,
  "name": "실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발",
  "provider": "김영한",
  "price": 88000,
  "image": "https://cdn.inflearn.com/public/courses/324119/course_cover/07c45106-3cfa-4dd6-93ed-a6449591831c/%E1%84%80%E1%85%B3%E1%84%85%E1%85%AE%E1%86%B8%205%20%E1%84%87%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A1%204.png",
  "people": 12400,
  "free": 4
}

我尝试用total状态实现总价计算，但写法有误，以下是相关组件代码，求正确实现方法：

原CartAside组件代码 #

import React, { useState } from 'react'
import styled from 'styled-components';

const Wrap = styled.div`
  position: relative;
  left: 900px;
  bottom: 260px;
`


function CartAside({InCart}) {

  const [total, setTotal] = useState(0)
  setTotal(InCart.map((product)=>{
    return total += product.price
  }))

  return (
    <Wrap>
    <div id='Price1'> 
      <span id='Price11'>
        선택상품 금액 {total}
      </span>
    </div>
   </Wrap>
  )
}


export default CartAside;

原父组件RealCart代码 #

import CartAside from './Components/CartAside';

function RealCart({InCart}) {

  return (
    <div>
      <Top />
      <Navi />
      <Cart />
      <CartHeader />
      {InCart.map((cart)=> {
        return <CartContent key={`key-${cart.id}`} cart={cart}/>
      })}
      <CartAside InCart={InCart}/>
    </div>
  )
}

export default RealCart;

原代码的问题 #

1. 直接在组件函数体中调用setTotal，会触发组件无限重渲染（每次渲染都调用setTotal，导致再次渲染）。
2. 使用map方法累加总价是错误的，map的作用是生成新数组，而非累加数值，正确的做法是用reduce方法。
3. 总价属于派生状态（由InCart计算得出），不需要单独用useState存储，直接计算即可，避免状态不同步问题。

正确实现方式 #

修改后的CartAside组件 #

import React from 'react'
import styled from 'styled-components';

const Wrap = styled.div`
  position: relative;
  left: 900px;
  bottom: 260px;
`

function CartAside({InCart}) {
  // 用reduce计算总价，初始值为0，累加每个商品的price
  const total = InCart.reduce((sum, product) => sum + product.price, 0)

  return (
    <Wrap>
      <div id='Price1'> 
        <span id='Price11'>
          선택상품 금액 {total}
        </span>
      </div>
    </Wrap>
  )
}

export default CartAside;

复杂场景补充（如需要优惠券/折扣逻辑） #

如果后续需要处理优惠券、折扣等复杂逻辑，必须将总价存为状态，可以用useEffect监听InCart的变化来更新：

import React, { useState, useEffect } from 'react'
import styled from 'styled-components';

const Wrap = styled.div`
  position: relative;
  left: 900px;
  bottom: 260px;
`

function CartAside({InCart}) {
  const [total, setTotal] = useState(0)

  // 监听InCart变化，更新总价
  useEffect(() => {
    const calculatedTotal = InCart.reduce((sum, product) => sum + product.price, 0)
    setTotal(calculatedTotal)
  }, [InCart]) // 依赖项为InCart，当InCart变化时执行

  return (
    <Wrap>
      <div id='Price1'> 
        <span id='Price11'>
          선택상품 금액 {total}
        </span>
      </div>
    </Wrap>
  )
}

export default CartAside;

其他相关组件（RealCart、App等）无需修改，保持原有逻辑即可。

内容的提问来源于stack exchange，提问作者MontaKr