如何为功能组件中的每个组件创建一个计数器？

Question

晕大家，我现在想问我的问题.. 我想在每个组件列表中创建一个计数器。我已经有一个处理计数器的函数，但是计数器不会在特定的 id 中增加。该函数增加所有组件的计数器值..请帮助我

这是我的代码

MenuPage.js

import React, { useEffect, useState } from "react";
import "../../assets/index.css";
import ProductList from "../../components/ProductList";
import { productList } from "../../components/constant/productList";
import NavigationBottom from "../../components/NavigationBottom";
function MenuPage() {
  const [showDisplay, setShowDisplay] = useState("grid");
  const [quantityProduct, setQuantityProduct] = useState(0);
  const handleShowDisplay = (e) => {
    setShowDisplay(e);
  };
  const handleAdd = (value, idx) => {
    if (value.id === idx + 1) {
      setQuantityProduct(quantityProduct + 1);
    } else {
      setQuantityProduct(0);
    }
  };
  const handleMinus = () => {
    if (quantityProduct === 0) {
      return 0;
    }
    setQuantityProduct(quantityProduct - 1);
  };
  return (
    <div className="main_container">
      <div className="container_menu__style">
        <div
          onClick={() => handleShowDisplay("grid")}
          className="button_grid__view"
        >
          <i class="bi bi-grid"></i>
        </div>
        <div
          onClick={() => handleShowDisplay("list")}
          className="button_list__view"
        >
          <i class="bi bi-list"></i>
        </div>
      </div>
      <div
        className={` ${
          showDisplay === "grid"
            ? "container_menu__page"
            : "container_menu__page_list"
        }`}
      >
        {productList.map((item, idx) => {
          return (
            <ProductList
              key={idx}
              id={idx}
              item={item}
              quantityProduct={quantityProduct}
              showDisplay={showDisplay}
              handleAdd={handleAdd}
              handleMinus={handleMinus}
            />
          );
        })}
        <NavigationBottom />
      </div>
    </div>
  );
}

export default MenuPage;

ProductList.js

import React from "react";
function ProductList({
  id,
  item,
  quantityProduct,
  showDisplay,
  handleAdd,
  handleMinus,
}) {
  return (
    <div
      className={` ${
        showDisplay === "grid"
          ? "wrapper_menu__product"
          : "wrapper_menu__product_list"
      }`}
    >
      <div
        className={` ${
          showDisplay === "grid"
            ? "content_menu__product"
            : "content_menu__product_list"
        }`}
      >
        <div
          className={`${
            showDisplay === "grid"
              ? "image_menu__product"
              : "image_menu__product_list"
          }`}
        >
          <img
            alt="product-list"
            className={` ${showDisplay === "grid" ? "" : "img_list"}`}
            src="https://i.pinimg.com/originals/23/91/52/2391523603cbd5153d7eb4e37eb3c882.png"
          />
        </div>
        <div className="wrapper_menu__detail">
          <div className="container_menu">
            <div className="menu_title__product">{item.product_name}</div>
            <div className="menu_price__product">Rp. {item.product_price}</div>
          </div>
          <div className="container_quantity">
            {/* <div className="quantity_text">Jumlah pesanan</div> */}

            <button
              className="button_minus__product"
              onClick={() => handleMinus(item)}
            >
              <i class="bi bi-dash"></i>
            </button>
            <div className="quantity_product">{quantityProduct}</div>
            <button
              className="button_add__product"
              onClick={() => handleAdd(item, id)}
            >
              <i class="bi bi-plus"></i>
            </button>
          </div>
          {/* <div className="wrapper_quantity__product">
                    <div className="quantity_product__text">Jumlah Pesanan</div>
                    <div className="quantity_product__number"></div>
                  </div> */}
        </div>
      </div>
    </div>
  );
}

export default ProductList;

Answer 1

您的MenuPage 只有一个quantityProduct（和setQuantityProduct）变量。所有项目都在使用和设置这个相同的变量。