React函数式组件列表中如何为每个子组件实现独立计数器？

问题根源 #

• 你在父组件只定义了单个全局的quantityProduct数字状态，所有列表子组件都共用这同一个状态值，修改时自然所有组件的计数都会同步变更。
• 现有增减逻辑没有和商品ID做正确绑定，handleMinus甚至没有接收商品ID参数，无法定位要修改的对应商品计数。

修复方案 #

步骤1：调整父组件状态结构 #

将单个数字状态改为对象结构，以商品ID为key，对应计数为value，实现每个商品独立存储计数。

步骤2：重写增减处理逻辑 #

新增、减少计数时只修改对应商品ID的数值，不影响其他商品。

步骤3：调整子组件参数传递 #

给每个子组件传递对应商品自身的计数值，而非全局共用的计数值。

修改后代码 #

MenuPage.js #

import React, { 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");
  // 状态改为对象结构，存储每个商品id对应的计数
  const [quantityMap, setQuantityMap] = useState({});

  const handleShowDisplay = (e) => {
    setShowDisplay(e);
  };

  const handleAdd = (item, id) => {
    setQuantityMap(prev => {
      const currentCount = prev[item.id] || 0;
      return {
        ...prev,
        [item.id]: currentCount + 1
      }
    })
  };

  const handleMinus = (item) => {
    setQuantityMap(prev => {
      const currentCount = prev[item.id] || 0;
      if (currentCount <= 0) return prev;
      return {
        ...prev,
        [item.id]: currentCount - 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={quantityMap[item.id] || 0}
              showDisplay={showDisplay}
              handleAdd={handleAdd}
              handleMinus={handleMinus}
            />
          );
        })}
        <NavigationBottom />
      </div>
    </div>
  );
}

export default MenuPage;

ProductList.js #

现有逻辑无需大幅修改，确保handleMinus传参正确即可，当前代码已满足需求无需调整。

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