React useState钩子问题：修改商品数量后订单摘要不更新

我正在构建一个购物车页面，左侧展示购物车内所有商品，右侧展示订单详情与价格。此前修改商品数量时单个商品价格不更新的问题已解决，但现在遇到新问题：修改商品数量时，右侧订单摘要未同步更新，删除商品时订单摘要却能正常变化。两处均使用同一个cart状态计算相关数值。

OuterCart组件代码 #

import React, { useState } from 'react';
import CartItem from './CartItem';
import CartOrder from './CartOrder';

const OuterCart = () => {
  const items = [
    {
      name: 'Boardwalk view',
      quantity: 3,
      finish: 'Non-matted',
      size: '4x8',
      price: 19.99,
      id: 0,
    },
    {
      name: '2 Boardwalk view',
      quantity: 1,
      finish: 'Matted',
      size: '3x6',
      price: 20.99,
      id: 1,
    },
    ... // there are more items
  ]
  
  const [cart, setCart] = useState(items);

  function removeItem(id) { // function run when I click the X
    const newCart = cart.filter((item) => item.id !== id)
    setCart(newCart);
  }

  function changeQuantity(event, id) { // function run when I update the dropdown on an item
    let newCart = [...cart];
    for (let i=0; i<cart.length; i++) {
      if (cart[i].id === id) {
        newCart[i] = {
          ...newCart[i],
          quantity: parseInt(event.target.value),
        }
      }
    }
    setCart(newCart);
  }

  return (
    <div className='px-3 text-gray-800'>
      <h1 className='my-10 text-2xl font-bold'>Shopping Cart</h1>
      <div className='grid grid-cols-10'>
        <div className='col-span-5 flex flex-col mb-5 border-b text-gray-800'>
          {cart.length === 0 ? <p>You have no items in your cart. <a href="/shop" className='text-indigo-600'>Go shopping</a> to add some!</p> : ""}
          {cart.map((value, index, array) => {
            return(<CartItem value={value} removeItem={removeItem} changeQuantity={changeQuantity} />)
          })} // this works just fine for each item, no matter the action
        </div>
        <div className='col-span-1'></div>
        <CartOrder cart={cart} /> // this is the order summary, only updates appropriately when I remove an item, not when I change the quantity
      </div>
    </div>
  );
};

export default OuterCart;

CartOrder组件代码 #

import { React } from 'react';

const CartOrder = ({cart}) => {
  const subtotal = cart.reduce((sum, item) => sum + item.price, 0);

  const taxEstimate = parseFloat((subtotal * .06).toFixed(2));
  const taxEstimateString = parseFloat(subtotal * .06).toFixed(2);

  const orderTotalString = parseFloat(subtotal + taxEstimate).toFixed(2);
  const orderTotal = parseFloat((subtotal + taxEstimate).toFixed(2));

  return (
    <div className='col-span-4 text-gray-800'>
      <div className='rounded-xl bg-gray-100 px-7 py-10'>
        <h1 className='text-lg font-medium mb-4'>Order summary</h1>

        <div className='flex justify-between border-b py-4'>
          <p className='text-gray-500 text-sm'>Subtotal</p>
          <p className='font-medium text-sm'>${subtotal}</p>
        </div>
        <div className='flex justify-between border-b py-4'>
          <p className='text-gray-500 text-sm'>Tax estimate</p>
          <p className='font-medium text-sm'>${taxEstimateString}</p>
        </div>
        <div className='flex justify-between py-4'>
          <p className='font-semibold'>Order total</p>
          <p className='font-semibold'>${orderTotalString}</p>
        </div>
        
        <a href='/' className='mt-5 inline-block w-full bg-indigo-600 hover:bg-indigo-700 transition text-gray-50 text-center px-3 py-3 font-medium tracking-wide rounded-lg'>Checkout</a>
      </div>
    </div>
  );
};

export default CartOrder;

已卡在此问题约一小时，恳请提供帮助。

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