如何在Reactjs中获取购物车中所有产品的总价

import React, { Component } from 'react';

class ShoppingCart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      totalPrice: 0
    };
  }

  componentDidMount() {
    this.calculateTotalPrice();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.products !== this.props.products) {
      this.calculateTotalPrice();
    }
  }

  calculateTotalPrice() {
    const { products } = this.props;
    let totalPrice = 0;
    products.forEach(product => {
      totalPrice += product.price;
    });
    this.setState({ totalPrice });
  }

  render() {
    const { products } = this.props;
    const { totalPrice } = this.state;

    return (
      <div>
        <h2>Shopping Cart</h2>
        <ul>
          {products.map(product => (
            <li key={product.id}>{product.name} - ${product.price}</li>
          ))}
        </ul>
        <p>Total Price: ${totalPrice}</p>
      </div>
    );
  }
}

export default ShoppingCart;