React Web应用实现点击球队名匹配对应球员功能求助

需求说明 #

我开发了一个基于React的网页应用，展示存储在MongoDB中的两个API数据：球队列表和球员列表。需要实现以下功能：点击左侧表格中的球队名称时，在右侧表格筛选并展示隶属于该球队的球员（通过球队名称匹配），两个API无直接关联，寻求最优解决方案。

API数据示例 #

Teams API #

[
   {
      "_id":"62e9a16df4459d1c5fa1e876",
      "team_name":"Los Angeles Rams"
   },
   {
      "_id":"62e9a178f4459d1c5fa1e877",
      "team_name":"San Francisco 49ers"
   },
   {
      "_id":"62e9a17ff4459d1c5fa1e878",
      "team_name":"Green Bay Packers"
   },
   {
      "_id":"62eafc32a50f5d0a4c87ad59",
      "team_name":"Seattle Seahawks"
   },
   {
      "_id":"62ec18ef44f3c6825fc8afa5",
      "team_name":"Baltimore Ravens"
   },
   {
      "_id":"62ec19967b7d859026f9f08f",
      "team_name":"New England Patriots"
   },
   {
      "_id":"62ec219089471b71043592f6",
      "team_name":"Chicago Bears"
   },
   {
      "_id":"62f2bcec617ec02092113f1d",
      "team_name":"Buffalo Bills"
   },
   {
      "_id":"62f2bcf5617ec02092113f1e",
      "team_name":"Miami Dolphins"
   },
   {
      "_id":"62f2bcfd617ec02092113f1f",
      "team_name":"New York Jets"
   },
   {
      "_id":"62f2c09d617ec02092113f22",
      "team_name":"San Jose Earthquakes"
   },
   {
      "_id":"62f696d18ead5f49211fa76a",
      "team_name":"New York Giants"
   }
]

Players API #

[
   {
      "_id":"62f2bd43617ec02092113f20",
      "age":"35",
      "name":"Chase Daniel",
      "position":"QB",
      "ranking":"14",
      "team":"Los Angeles Rams"
   },
   {
      "_id":"62f2bd91617ec02092113f21",
      "age":"23",
      "name":"Leddie Brwon",
      "position":"RB",
      "ranking":"35",
      "team":"Los Angeles Rams"
   },
   {
      "_id":"62f2c0c2617ec02092113f23",
      "age":"21",
      "name":"Joe Brown",
      "position":"TE",
      "ranking":"5",
      "team":"San Jose Earthquakes"
   },
   {
      "_id":"62f696ea8ead5f49211fa76b",
      "age":"25",
      "name":"Daniel Jones",
      "position":"QB",
      "ranking":"8",
      "team":"New York Giants"
   },
   {
      "_id":"62f697098ead5f49211fa76c",
      "age":"21",
      "name":"Evan Neal",
      "position":"OT",
      "ranking":"73",
      "team":"New York Giants"
   }
]

现有React表格代码 #

<Table bordered hover>
    <thead>
        <tr>
            <th>No.</th>
            <th>Team Name</th>
        </tr>    
    </thead>
    {teams && teams.map((item, index) => (
        <tbody key={index}>
            <tr>
                <td>{index+1}</td>
                <td onClick={/*Function goes here*/}>{item.team_name}</td>
            </tr>
        </tbody>
        ))
    }
</Table>

<Table bordered hover>
    <thead>
        <tr>
            <th>No.</th>
            <th>Player Name</th>
            <th>Age</th>
            <th>Position</th>
            <th>Ranking</th>
            <th>Team</th>
        </tr>    
    </thead>
    {players && players.map((item, index) => (
        <tbody key={index}>
            <tr>
                <td>{index+1}</td>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.position}</td>
                <td>{item.ranking}</td>
                <td>{item.team}</td>
            </tr>
        </tbody>
        ))
    }
</Table>

应用界面展示 #

核心需求 #

当teams.item.team_name等于players.item.team时，展示该球队的所有球员。

解决方案 #

1. 添加状态管理 #

在组件中使用useState存储选中的球队名称：

import { useState } from 'react';

const YourComponent = () => {
  // 其他状态：teams, players
  const [selectedTeam, setSelectedTeam] = useState(null);
  
  // ... 其他代码
}

2. 绑定点击事件 #

修改球队表格的点击事件，设置选中的球队：

<td 
  onClick={() => setSelectedTeam(item.team_name)}
  style={{ cursor: 'pointer' }}
>
  {item.team_name}
</td>

3. 筛选球员数据 #

根据选中的球队过滤球员数组，未选中时显示全部球员：

const filteredPlayers = selectedTeam 
  ? players.filter(player => player.team === selectedTeam) 
  : players;

4. 更新右侧表格渲染 #

将右侧表格的数据源替换为过滤后的filteredPlayers：

<Table bordered hover>
    <thead>
        <tr>
            <th>No.</th>
            <th>Player Name</th>
            <th>Age</th>
            <th>Position</th>
            <th>Ranking</th>
            <th>Team</th>
        </tr>    
    </thead>
    {filteredPlayers && filteredPlayers.map((item, index) => (
        <tbody key={index}>
            <tr>
                <td>{index+1}</td>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.position}</td>
                <td>{item.ranking}</td>
                <td>{item.team}</td>
            </tr>
        </tbody>
        ))
    }
</Table>

5. 体验与性能优化 #

• 选中高亮：给选中的球队添加背景色，提升交互反馈：

<td 
  onClick={() => setSelectedTeam(item.team_name)}
  style={{ 
    cursor: 'pointer', 
    backgroundColor: selectedTeam === item.team_name ? '#f0f0f0' : 'transparent',
    transition: 'background-color 0.2s'
  }}
>
  {item.team_name}
</td>

• 大数据量优化：预先构建球员映射表，减少筛选时的计算开销：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [teams, setTeams] = useState([]);
  const [players, setPlayers] = useState([]);
  const [selectedTeam, setSelectedTeam] = useState(null);
  const [playerMap, setPlayerMap] = useState({});

  // 构建球员映射表
  useEffect(() => {
    if (players.length > 0) {
      const map = players.reduce((acc, player) => {
        acc[player.team] = [...(acc[player.team] || []), player];
        return acc;
      }, {});
      setPlayerMap(map);
    }
  }, [players]);

  // 从映射表获取筛选结果
  const filteredPlayers = selectedTeam 
    ? playerMap[selectedTeam] || [] 
    : players;
  
  // ... 其他代码
}

内容的提问来源于stack exchange，提问作者New CS Developer