React创建Tabs组件时如何解析JSON按子分类分组展示数据

当前代码直接遍历原始员工数组PostData渲染Tab.TabPane，数组里每一条员工记录都会生成一个独立标签，同职位的多条员工数据会生成多个同名标签，才会出现多个重复Staff标签的问题。

核心是先对原始数据按Title（职位）字段分组，得到「唯一职位名-对应职位下所有员工列表」的结构，再基于分组结果渲染标签：每个分组对应1个标签，标签内遍历渲染该分组下的全部员工信息即可。

具体实现 #

你现有的Tab组件逻辑不需要改动，只需要修改Staff页面的数据处理和渲染逻辑即可，参考代码如下：

import "./styles/staff.css";
import PostData from "./data/posts.json";
import Tab from "./Tabs/Tab";
import "./Tabs/Tab.css";

const Staff = () => {
  // 按职位字段分组员工数据
  const groupedPost = PostData.reduce((res, item) => {
    const jobTitle = item.Title;
    if (!res[jobTitle]) res[jobTitle] = [];
    res[jobTitle].push(item);
    return res;
  }, {});
  // 提取去重后的职位列表，作为标签名
  const jobTitles = Object.keys(groupedPost);

  return (
    <div className="bg">
      <div id="testimonial-slider" className="owl-carousel">
        <div className="wrapper">
          <h1>Staff</h1>
          <div className="team">
            <Tab>
              {jobTitles.map(title => (
                <Tab.TabPane key={title} tab={title}>
                  {/* 渲染当前职位下的所有员工 */}
                  {groupedPost[title].map(staff => (
                    <div className="team_member" key={staff.id}>
                      <div className="team_img">
                        <img
                          src="https://i.imgur.com/2pGPLrl.png"
                          alt="Team_image"
                        />
                      </div>
                      <div>
                        <h3>{staff.Name}</h3>
                        <p>{staff.Title}</p>
                        <p>{staff.Location}</p>
                        <p>{staff.Description}</p>
                      </div>
                    </div>
                  ))}
                </Tab.TabPane>
              ))}
            </Tab>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Staff;

逻辑说明 #

• 用数组的reduce方法遍历原始员工数据，以职位名为key归类员工，自动完成职位去重
• 遍历去重后的职位列表生成标签，每个职位仅对应1个标签项
• 每个标签内部遍历对应职位的员工数组，渲染该分类下所有人员信息
• 如果需要调整标签展示顺序，只需要对jobTitles数组做自定义排序后再遍历即可。

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