reactjs 如何从react中的子组件循环中求和？

x3naxklr 于 2023-02-18 发布在 React

关注(0)|答案(2)|浏览(133)

我有两个react组件，一个是Cart，另一个是CartItem。在Cart中，我使用.map来循环CartItem。在CartItem中，我有一个行合计，其值为price * item.count。无论有多少个CartItem，我如何合计所有行合计？并返回Total，这样我就可以得到购物车的总价值。我试图添加一个句柄总计函数，但它只返回一个元素的行总计，而不是所有元素的行总计。
下面是购物车项目：

const CartItem = ({item, handleTotal}) => {
 var [itemCount, SetItemCount] = useState(1);
 var [Linetotal, SetLineTotal] = useState(item.price);

 const incrementcount = () => {
SetItemCount(++itemCount);
};
const decrementcount = () => {
SetItemCount(--itemCount);
};

 useEffect(() => {
  handleTotal(item.id,Linetotal)
 },[])
 return (
<div>
    <Product>
      <ProductDetail>
        <Image src={item.image} />
        <Details>
          <ProductName>
            <b>Product:</b> {item.name}
          </ProductName>
          <ProductId>
            <b>ID:</b> {item.id}
          </ProductId>
          <ProductColor color={item.color} />
          <ProductSize>
            <b>Size:</b> {item.size}
          </ProductSize>
        </Details>
      </ProductDetail>
      <PriceDetail>
        <ProductAmountContainer>
          <Add onClick={() => {incrementcount(); SetLineTotal(item.price*itemCount)}} />
          <ProductAmount>{itemCount}</ProductAmount>
          <Remove onClick={() => {decrementcount(); SetLineTotal(item.price*itemCount)}} />
        </ProductAmountContainer>
        <ProductPrice>$ {item.price*itemCount}</ProductPrice>
      </PriceDetail>
    </Product>
</div>
   );
  };

        export default CartItem;

这里是购物车：

const Cart = () => {
  var [total, setTotal] = useState([]);
  const handleTotal = (id,price) => {
    setTotal(id,price);
  
  };
  return (
    <Container>
      <Navbar />
      <Announcement />
      <Wrapper>
        <Title>YOUR BAG</Title>
        <Top>
          <TopButton>CONTINUE SHOPPING</TopButton>
          <TopTexts>
            <TopText>Shopping Bag(2)</TopText>
            <TopText>Your Wishlist (0)</TopText>
          </TopTexts>
          <TopButton type="filled">CHECKOUT NOW</TopButton>
        </Top>
        <Bottom>
          <Info>
            {IntheCart.map((item) => (
              <CartItem key={item.id} item={item} handleTotal={handleTotal} />
            ))}
            <Hr />
          </Info>
          <Summary>
            <SummaryTitle>ORDER SUMMARY</SummaryTitle>
            <SummaryItem>
              <SummaryItemText>Subtotal</SummaryItemText>
              <SummaryItemPrice>$ 80</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
              <SummaryItemText>Estimated Shipping</SummaryItemText>
              <SummaryItemPrice>$ 5.90</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem>
              <SummaryItemText>Shipping Discount</SummaryItemText>
              <SummaryItemPrice>$ -5.90</SummaryItemPrice>
            </SummaryItem>
            <SummaryItem type="total">
              <SummaryItemText>Total</SummaryItemText>
              <SummaryItemPrice>$ 80</SummaryItemPrice>
            </SummaryItem>
            <Button>CHECKOUT NOW</Button>
          </Summary>
        </Bottom>
      </Wrapper>
      <Footer />
    </Container>
  );
};

export default Cart;

reactjs

来源：https://stackoverflow.com/questions/75492078/how-can-i-sum-up-a-value-from-a-loop-of-child-components-in-react

2条答案

按热度按时间

mftmpeh81#

您可以在Card组件中创建updateTotal函数，并且一旦您在CardItem中创建increse或decrement项，则更新total值。

const CartItem = ({item, handleTotal, updateTotal}) => {
// code...
const incrementcount = () => {
  SetItemCount(++itemCount);
  updateTotal(item.price);
};

const decrementcount = () => {
  SetItemCount(--itemCount);
  updateTotal(-item.price);
};
// code...

updateTotal函数。

var [totalPrice, setTotalPrice] = useState(0);

const updateTotal = (value) => {
  setTotalPrice(prev => prev + value)
}

将updateTotal函数添加到CardItem

<CartItem key={item.id} item={item} handleTotal={handleTotal} updateTotal={updateTotal} />

赞(0）回复(0）举报 2023-02-18

nfs0ujit2#

如果你需要小计，你可以这样做。

const Cart = () => {
  ...

  var [subSum, setSubSum] = useState(null);
  var [totalSum, setTotalSum] = useState(0);
  
  const handleTotal = (id,price) => {
    setSubSum({...subSum, id:price});  
  };
  useEffect(()=>{
    var sum = 0;
    for (const [key, value] of Object.entries(subSum)) {
       sum += value;
    }
    setTotalSum(sum);
  },[total])

  ...
}

赞(0）回复(0）举报 2023-02-18

我来回答

reactjs 如何从react中的子组件循环中求和？

2条答案

相关问题

热门标签

最新问答