React中如何映射对象数组并按运动项目分组展示特定值？

原代码的问题 #

• 语法错误：data.map的回调函数里直接返回两个独立的<div>，React要求组件/函数只能返回单个根元素，这会直接导致解析报错；更关键的是，这种写法逻辑完全不对。
• 逻辑错误：当前遍历每个运动员时都生成足球和篮球两个区块，导致每个运动员的名字会同时出现在两个区块里，完全达不到同项目分组展示的需求。

正确实现思路 #

1. 用useEffect在组件挂载时请求API数据，存入state
2. 把数组按sport字段分组，将足球、篮球运动员分别归类
3. 分别渲染两个分组区块，每个区块内展示对应项目的所有运动员姓名

完整修正代码 #

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  // 发起API请求，替换成你的真实接口地址
  useEffect(() => {
    const fetchAthletes = async () => {
      try {
        const response = await fetch('你的API接口地址');
        const resData = await response.json();
        setData(resData);
      } catch (err) {
        console.error('数据请求失败:', err);
      }
    };
    fetchAthletes();
  }, []);

  // 按运动项目分组，生成{sport: [姓名列表]}的结构
  const groupedAthletes = data.reduce((result, athlete) => {
    if (!result[athlete.sport]) {
      result[athlete.sport] = [];
    }
    result[athlete.sport].push(athlete.name);
    return result;
  }, {});

  return (
    <div>
      {/* 足球运动员区块 */}
      <div>
        <h1>Sport: soccer</h1>
        {groupedAthletes.soccer?.map((name, idx) => (
          <h5 key={idx}>{name}</h5>
        ))}
      </div>

      {/* 篮球运动员区块 */}
      <div>
        <h1>Sport: basketball</h1>
        {groupedAthletes.basketball?.map((name, idx) => (
          <h5 key={idx}>{name}</h5>
        ))}
      </div>
    </div>
  );
}

export default App;

代码关键点说明 #

• useEffect：确保组件挂载时只请求一次数据，避免重复调用API
• reduce：高效完成数组分组，把相同项目的运动员姓名整合到同一个数组里
• 可选链?.：处理数据未加载完成时的空值情况，避免页面报错
• key属性：React列表渲染必须的标识，提升渲染性能

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