React中基于选择的团队统计数据展示问题求助

一、先把统计数据存入React状态 #

你当前的filtered对象仅在API回调内创建，组件渲染时无法访问，需要将其存入React状态：

1. 在组件内添加状态变量：

const [teamStats, setTeamStats] = useState({});
const [selectedTeam, setSelectedTeam] = useState(''); // 存储选中的团队标识

2. 在API请求的then回调中，计算完filtered后更新状态：

.then(response => {
  const result = response.data.rows;
  setRes(result);

  // 你的统计计算逻辑...

  setTeamStats(filtered);
})

二、处理Select组件的选中事件 #

确保handleSelect函数正确更新选中团队的状态，假设teams选项的value与filtered对象的键名一致（如Greeters、KidsChurch）：

const handleSelect = (selectedOption) => {
  setSelectedTeam(selectedOption.value);
};

三、根据选中团队渲染统计表格 #

当用户选中团队后，从teamStats中取出对应数据渲染统计表格：

{selectedTeam && (
  <table border="1">
    <thead>
      <tr>
        <th>统计类别</th>
        <th>人数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NON-VEG 人数</td>
        <td>{teamStats[selectedTeam].nvCount}</td>
      </tr>
      <tr>
        <td>VEG 人数</td>
        <td>{teamStats[selectedTeam].vCount}</td>
      </tr>
      <tr>
        <td>Taken 为 True 人数</td>
        <td>{teamStats[selectedTeam].Taken}</td>
      </tr>
    </tbody>
  </table>
)}

四、优化统计计算代码（简化重复逻辑） #

你当前的统计代码存在大量重复判断，可通过Array.reduce简化，扩展性更强（新增团队只需修改teamNames数组）：

.then(response => {
  const result = response.data.rows;
  setRes(result);

  // 定义所有需要统计的团队
  const teamNames = ['Greeters', 'Cleaning', 'Intercession', 'Media', 'Kids Church'];
  
  // 使用reduce生成统计对象
  const filtered = result.reduce((acc, el) => {
    // 匹配当前用户所属团队
    const matchedTeam = teamNames.find(team => el.team.includes(team));
    if (!matchedTeam) return acc;

    // 统一团队键名（如"Kids Church"转为"KidsChurch"）
    const teamKey = matchedTeam.replace(' ', '');

    // 初始化团队统计项（若不存在）
    if (!acc[teamKey]) {
      acc[teamKey] = { nvCount: 0, Taken: 0, vCount: 0 };
    }

    // 更新统计数据
    if (el.preference === 'NON-VEG') {
      acc[teamKey].nvCount++;
    } else if (el.preference === 'VEG') {
      acc[teamKey].vCount++;
    }
    if (el.taken) {
      acc[teamKey].Taken++;
    }

    return acc;
  }, {});

  setTeamStats(filtered);
})

五、注意事项 #

• 确保Select组件选项的value与filtered对象的键名完全匹配（比如"Kids Church"选项的value设为KidsChurch）
• 如果API返回的团队名称存在拼写差异，可将includes判断替换为更严谨的全等匹配===

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