如何汇总多个独立Shop组件中的客户总数？

核心解决思路：状态提升 #

把各个店铺的客户计数状态从子组件移到父组件统一管理，子组件只负责展示数据和触发更新操作，父组件负责维护所有店铺的计数并计算总和——这是React里处理跨组件状态共享的标准做法。

具体实现步骤 #

1. 重构为通用Shop子组件 #

不用重复创建Shop、Shop2这类相似组件，做一个通用的Shop组件，通过props传递店铺名称、当前计数和递增方法：

import Uu5Elements from 'uu5g04-elements';

const Shop = ({ shopName, count, onIncrement }) => {
  const handleAddCustomer = () => {
    if (count < 10) {
      onIncrement(shopName);
    }
  };

  return (
    <div>
      <h1>{shopName}</h1>
      <p>Customers {count}</p>
      <Uu5Elements.Button onClick={handleAddCustomer}>+1</Uu5Elements.Button>
    </div>
  );
};

export default Shop;

2. 父组件统一管理状态并计算总和 #

父组件维护所有店铺的计数状态，实现递增逻辑，同时计算所有店铺的客户总数：

import { useState, useEffect } from 'react';
import Shop from './Shop';
import Total from './Total';
import RouteBar from './RouteBar';
import Css from './YourCssModule';

const MainPage = () => {
  const [currentTime, setCurrentTime] = useState(new Date());
  // 初始化三个店铺的客户数
  const [shopCounts, setShopCounts] = useState({
    Kaufland: 0,
    Lidl: 0,
    ThirdShop: 0
  });

  // 处理店铺客户数递增的方法
  const incrementCustomer = (shopName) => {
    setShopCounts(prevCounts => ({
      ...prevCounts,
      [shopName]: prevCounts[shopName] < 10 ? prevCounts[shopName] + 1 : prevCounts[shopName]
    }));
  };

  // 计算总客户数：把所有店铺的count值累加
  const totalCustomers = Object.values(shopCounts).reduce((sum, num) => sum + num, 0);

  // 实时更新时间（保留你原来的逻辑）
  useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <>
      <RouteBar />
      <div className={Css.mainContainer()}>
        <div>{currentTime.toLocaleString("cs")}</div>
        <h1>Total Customers</h1>
        <Total sum={totalCustomers} />
        {/* 渲染三个店铺组件，传递对应参数 */}
        <Shop 
          shopName="Kaufland" 
          count={shopCounts.Kaufland} 
          onIncrement={incrementCustomer} 
        />
        <Shop 
          shopName="Lidl" 
          count={shopCounts.Lidl} 
          onIncrement={incrementCustomer} 
        />
        <Shop 
          shopName="ThirdShop" 
          count={shopCounts.ThirdShop} 
          onIncrement={incrementCustomer} 
        />
      </div>
    </>
  );
};

export default MainPage;

3. Total组件基础实现 #

如果你的Total组件还未编写，可以参考这个简单版本：

const Total = ({ sum }) => {
  return <p>Total: {sum}</p>;
};

export default Total;

关键注意点 #

• 你原来按钮的onClick逻辑有语法错误：setCount((current) => current + 1)< 10写法不正确，正确的做法是在更新状态时判断上限，推荐在父组件统一控制逻辑，便于维护。
• 使用通用组件后，后续新增店铺只需在父组件的shopCounts中添加初始值，再渲染一个Shop组件即可，无需重复编写组件代码。

内容的提问来源于stack exchange，提问作者Zdeněk Chlouba