Я изучаю фронтенд-разработку и пишу простую корзину покупок в React, чтобы учиться. Когда я меняю количество продукта, я хочу создать объект значений количества по идентификатору продукта и передать его в компонент корзины для отображения позже. Данные о количествах, которые я собираю, кажутся правильными, потому что я вижу, что они правильно отображаются в состоянии QTY:, как показано на этом рисунке:

,но когда я передаю состояние количества родительскому элементу, а затем от родителя компоненту корзины покупок и console.info, данные кажутся повсюду... Иногда они вообще не подбираются, иногда слишком малы на 1 и так далее...

Я видел несколько видеороликов, в которых люди создают корзину для покупок и, кажется, используют инструменты управления состоянием, такие как реакция useContext или Redux, и я понимаю, что глобальное состояние было бы намного лучше, чем передача данных от дочернего элемента к родительскому, а затем от родителя к другому дочернему элементу, но Я думаю, что я еще не готов к инструментам управления состоянием.

Компонент приложения:

import { useState } from "react";
import ProductCard from "./components/ProductCard";
import ShoppingCart from "./components/ShoppingCart";

function App() {
  let [productData, setProductData] = useState({});

  function getProductData(cartData: object) {
    setProductData(cartData);
  }

  return (
    <>
      <div>
        <ProductCard passProductData = {getProductData} />
        <ShoppingCart productData = {productData} />
      </div>
    </>
  );
}

export default App;

Компонент корзины:

interface Props {
  productData: object;
}

function ShoppingCart({ productData }: Props) {
  return (
    <>
      <button
        onClick = {() => {
          console.info(JSON.stringify(productData));
        }}
        className = "bg-slate-400"
      >
        Test passed data
      </button>
      <h1 className = "font-bold">Your cart</h1>
      <p className = "font-bold">Order Total</p>
    </>
  );
}

export default ShoppingCart;

Компонент карточки товара:

import productList from "../data/productList";
import { useState } from "react";

interface Props {
  passProductData: (quantities: object) => void;
}

function ProductCard({ passProductData }: Props) {
  let [newProductList, changeProductList] = useState(productList);
  let [productQuantities, setProductQuantities] = useState({
    0: 0,
    1: 0,
    2: 0,
    3: 0,
    4: 0,
    5: 0,
  });
  function revealQuantityInput(id: number) {
    changeProductList(
      newProductList.map((product) => {
        if (product.id === id) {
          return { ...product, quantityVisibility: true };
        } else return product;
      })
    );
  }

  function increaseQuantity(id: number) {
    for (let [key, value] of Object.entries(productQuantities)) {
      if (Number(key) === id) {
        setProductQuantities({
          ...productQuantities,
          [key]: value + 1,
        });
      }
    }
    passProductData(productQuantities);
  }

  function decreaseQuantity(id: number) {
    for (let [key, value] of Object.entries(productQuantities)) {
      if (Number(key) === id) {
        setProductQuantities({
          ...productQuantities,
          [key]: value > 0 ? value - 1 : value,
        });
      }
    }
    passProductData(productQuantities);
  }

  function setSpecificQuantityValue(id: number, quantity: number) {
    newProductList.map((product) => {
      if (product.id === id) {
        return setProductQuantities({
          ...productQuantities,
          [product.id]: quantity,
        });
      }
    });
    passProductData(productQuantities);
  }

  return (
    <>
      {newProductList.map((product) => (
        <div className = "p-6 mb-6 [&>*]:mb-4" key = {product.id}>
          <img src = {product.image} />
          <div
            className = "bg-green-600 p-2"
            onClick = {() => revealQuantityInput(product.id)}
          >
            {product.quantityVisibility ? (
              <div>
                <p onClick = {() => decreaseQuantity(product.id)}>-</p>
                <input
                  type = "number"
                  id = {"quantity" + product.id}
                  min = "1"
                  max = "9"
                  step = "1"
                  onChange = {(e) =>
                    setSpecificQuantityValue(product.id, Number(e.target.value))
                  }
                  className = "bg-gray-300 w-[150px] opacity-100 mr-3"
                />
                <p onClick = {() => increaseQuantity(product.id)}>+</p>
              </div>
            ) : (
              <p>Add to Cart</p>
            )}
          </div>
          <p>{product.category}</p>
          <p>{product.name}</p>
          <p>{product.price}</p>
          <p>QTY: {JSON.stringify(productQuantities)}</p>
        </div>
      ))}
    </>
  );
}

export default ProductCard;

Данные о продукте:

import productTypes from "../types/productTypes"

const productList:productTypes[] = [
    {
        id: 0,
        image: "../../images/image-waffle-mobile.jpg",
        name: "Waffle with Berries",
        category: "Waffle",
        price: 6.50,
        quantityVisibility: false,
    },
    {
        id: 1,
        image: "../../images/image-creme-brulee-mobile.jpg",
        name: "Vanilla Bean Crème Brûlée",
        category: "Crème Brûlée",
        price: 7.00,
        quantityVisibility: false,
    },
    {
        id: 2,
        image: "../../images/image-macaron-mobile.jpg",
        name: "Macaron Mix of Five",
        category: "Macaron",
        price: 8.00,
        quantityVisibility: false,
    },
    {
        id: 3,
        image: "../../images/image-tiramisu-mobile.jpg",
        name: "Classic Tiramisu",
        category: "Tiramisu",
        price: 5.50,
        quantityVisibility: false,
    },
    {
        id: 4,
        image: "../../images/image-baklava-mobile.jpg",
        name: "Pistachio Baklava",
        category: "Baklava",
        price: 4.00,
        quantityVisibility: false,
    },
    {
        id: 5,
        image: "../../images/image-meringue-mobile.jpg",
        name: "Pistachio Baklava",
        category: "Baklava",
        price: 4.00,
        quantityVisibility: false,
    },

]

export default productList

Заранее спасибо!

С уважением, Дариус