React JS 类组件 - Set Sate

问：

我只是想更新 totalItems 和 total price 的状态。我已经在下面的购物车类组件中创建了逻辑，但我收到以下错误：

1. Cart.js：24 未捕获的类型错误：无法读取未定义的属性（读取“长度”） 在 Cart.render （Cart.js：24：1） 在完成类组件 （react-dom.development.js：19752：1）

2. [违规]“message”处理程序耗时 177 毫秒

我假设我需要在每个语句中的某处包含setState，但我不确定在哪里。你能帮忙吗？

class Cart extends Component{
    constructor(props){
        super(props)
this.state={
    shoppingCart:[]
}

this.state = {
    totalItems: 0,
    totalPrice: 0
}
        
    }
    render(){
     
const cartItems = JSON.parse( localStorage.getItem('cart'));

const totalItems =  this.state.cartItems.length; 
const  totalPrice =  this.cartItems.map(item => item.amount).redeuce((prev, curr)=> prev + curr,0 ); 
return(<>
<div>
<h2>YOUR CART</h2>
<p># Of Items: <span>{totalItems}</span></p>
<p>Total Price: <span>{totalPrice}</span></p>
<p>Check Out</p>
</div>
      <div className="container prod-cntr">
        <div className="row prod-row">
          {cartItems?.map((element) => (
            <div className="col-lg-3 prod-col" key={element.id}>
              <div className="card card-container">
                <img
                  src={element.image}
                  alt="product img"
                  className="prod-img"
                />
                <div className="card-body">
                  <p className="card-title">{element.product}</p>
                  <p className="card-text">{element.description}</p>
                 <p className ="quantity"><span className="decrease"><i className="fa-solid fa-minus"></i></span>Quantity: <span className ="increase"><i className="fa-solid fa-plus"></i> </span></p>
                  
                </div>
              </div>
            </div>
          ))}
        </div>
        <div>
        </div>
      </div>

        </>)
    }
}

export default Cart;