React多组件按钮点击计数总和展示问题求助

核心思路 #

把各个Shop组件的计数状态提升到共同的父组件中管理，父组件统一维护所有店铺的顾客数，同时提供更新方法给子组件，最后由父组件计算并展示总数。

代码实现 #

父组件（App.js）

import { useState } from 'react';
import Shop from './Shop';
import Shop2 from './Shop2';
import Shop3 from './Shop3';

function App() {
  // 初始化三个店铺的顾客数，每个初始为0
  const [shops, setShops] = useState([
    { id: 1, count: 0 },
    { id: 2, count: 0 },
    { id: 3, count: 0 }
  ]);

  // 计算总顾客数
  const totalCustomers = shops.reduce((sum, shop) => sum + shop.count, 0);

  // 更新指定店铺的顾客数（上限5）
  const handleIncrement = (shopId) => {
    setShops(prevShops => 
      prevShops.map(shop => 
        shop.id === shopId && shop.count < 5 
          ? { ...shop, count: shop.count + 1 } 
          : shop
      )
    );
  };

  return (
    <div>
      <h2>Total Customers: {totalCustomers}</h2>
      {/* 给每个子组件传递当前计数和更新方法 */}
      <Shop count={shops[0].count} onIncrement={() => handleIncrement(1)} />
      <Shop2 count={shops[1].count} onIncrement={() => handleIncrement(2)} />
      <Shop3 count={shops[2].count} onIncrement={() => handleIncrement(3)} />
    </div>
  );
}

export default App;

子组件示例（Shop.js，Shop2、Shop3逻辑完全一致，仅组件名不同）

function Shop({ count, onIncrement }) {
  return (
    <div>
      <p>Shop Customers: {count}</p>
      <button onClick={onIncrement} disabled={count >= 5}>
        {count >= 5 ? '已满员' : '增加顾客'}
      </button>
    </div>
  );
}

export default Shop;

关键说明 #

• 状态提升：将原本分散在各个子组件的计数状态，统一移到父组件的shops数组中，确保数据唯一来源。
• 单向数据流：子组件通过props接收状态和更新方法，点击按钮时触发父组件的handleIncrement，由父组件更新状态后再传递回子组件。
• 总数计算：利用数组reduce方法遍历所有店铺的计数，累加得到总顾客数，实现实时汇总。

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