如何将api调用从至上函数发送到另一个名为product的组件，以更改名为cart: true的模拟数据并在cart中显示

function updateCartData() {
  // 发送API调用，获取数据
  // 处理数据，将cart设置为true或者false
  // 更新模拟数据
  const newData = {
    cart: true,
    // 其他数据字段...
  };
  setCartData(newData);
}

<Product updateCart={updateCartData} />

function Product(props) {
  // 其他组件逻辑...
  const { updateCart } = props;
}

function handleAddToCart() {
  updateCart();
}

function Cart() {
  const { cart } = props.cartData;

  return (
    <div>
      {cart && <p>已添加到购物车</p>}
      {/* 其他购物车内容... */}
    </div>
  );
}