个人技术总结——Json数据解析配合React组件库渲染数据

这个作业属于哪个课程	福州大学-202302软件工程实践
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	《构建之法》、React中文文档、Ant Design

---

一、技术概述

React是一个用于构建用户界面的JavaScript库，适用于单页应用程序（SPA）和复杂的用户界面开发。React通过组件化架构和虚拟DOM实现高效的UI更新和管理，增强了开发效率和应用性能。此技术广泛应用于各类Web应用开发，包括内容管理系统、社交媒体平台、电子商务网站等。学习React可以使开发者能够创建响应迅速且维护方便的Web应用。React技术的难点在于其状态管理和组件通信，需要熟悉JavaScript、异步操作和前端设计模式等知识。

二、技术详述

2.1、数据获取

使用React的useEffect钩子在组件挂载时进行数据获取。通过fetch函数从两个JSON文件中获取运动员信息和照片数据。

useEffect(() => {
  const loadAthletesData = async () => {
    try {
      const athletesResponse = await fetch("/athletes.json");
      const photosResponse = await fetch("/photo.json");

      if (!athletesResponse.ok || !photosResponse.ok) {
        throw new Error(`HTTP error! status: ${athletesResponse.status}`);
      }

      const athletesData = await athletesResponse.json();
      const photosData = await photosResponse.json();

      // 格式化数据
      const formattedData = athletesData.flatMap((item) =>
        item.Participations.flatMap((participation) =>
          participation.Disciplines.map((discipline) => {
            const photo = photosData.content.find(
              (photo) =>
                photo.titleUrlSegment ===
                `${participation.PreferredFirstName.toLowerCase()}-${participation.PreferredLastName.toLowerCase()}`
            );

            return {
              key: `${participation.ResultId}-${discipline.DisciplineId}`,
              countryName: item.CountryName,
              countryCode: item.CountryCode,
              athleteName: `${participation.PreferredLastName} ${participation.PreferredFirstName}`,
              gender: participation.Gender === "0" ? "男" : "女",
              DOB: participation.DOB,
              discipline: discipline.DisciplineName,
              photoUrl: photo ? `${photo.imageUrl}` : "",
              flagUrl: `https://www.worldaquatics.com/resources/v2.12.4/i/elements/flags/${item.CountryCode.toLowerCase()}.png`,
              infoUrl: `https://www.worldaquatics.com/athletes/${participation.ResultId}/${participation.PreferredLastName}-${participation.PreferredFirstName}`,
            };
          })
        )
      );

      setDataSource(formattedData);
    } catch (error) {
      console.error("加载运动员数据失败:", error);
    }
  };

  loadAthletesData();
}, []);

2.2、数据解析与格式化

数据获取后，通过flatMap方法展开嵌套的数据结构，并格式化成表格需要的形式。这样处理的目的是将原本复杂的数据结构转化为简单、平坦的结构，方便在表格中展示。

2.2.1、定义表格列

使用Ant Design的Table组件展示数据，定义每一列的数据字段和渲染方式。

const columns = [
  {
    title: "国家或地区",
    dataIndex: "countryName",
    key: "countryName",
    render: (text, record) => (
      <Space size="small">
        <Image
          src={record.flagUrl}
          alt={`国旗 - ${record.countryName}`}
          width={20}
          height={20}
        />
        {record.countryName}
      </Space>
    ),
  },
  {
    title: "选手",
    dataIndex: "athleteName",
    key: "athleteName",
    render: (text, record) => (
      <Space size="small">
        <Image
          src={record.photoUrl}
          alt={`选手照片 - ${record.athleteName}`}
          width={20}
          height={20}
        />
        {record.athleteName}
      </Space>
    ),
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
  },
  {
    title: "出生日期",
    dataIndex: "DOB",
    key: "DOB",
  },
  {
    title: "项目",
    dataIndex: "discipline",
    key: "discipline",
  },
  {
    title: "查看详细信息",
    key: "operation",
    render: (text, record) => (
      <Space size="small">
        <Link to={record.infoUrl}>
          <RightSquareOutlined style={{ fontSize: "24px" }} />
        </Link>
      </Space>
    ),
  },
];

2.2.2、渲染表格

使用Table组件，传入数据源和列定义，渲染最终的表格。

return (
  <div>
    <Table
      className="rank-table"
      dataSource={dataSource}
      columns={columns}
      scroll={{ y: 500 }}
      pagination={{ pageSize: 11 }}
    />
  </div>
);

2.3、流程图

三、问题与解决

3.1、问题一：数据获取失败

描述：
在使用fetch函数获取数据时，有时会出现HTTP错误。
解决：
添加错误处理机制，检查响应状态：

if (!athletesResponse.ok || !photosResponse.ok) {
  throw new Error(`HTTP error! status: ${athletesResponse.status}`);
}

3.2、问题二：图片加载失败

描述：
部分运动员的照片URL错误或不存在，导致图片无法加载。
解决：
在查找照片时增加容错处理，提供默认图片或空值：

photoUrl: photo ? `${photo.imageUrl}` : ""

3.3、问题三：Json数据格式不一致

描述：
不同JSON文件的数据格式不一致，导致数据合并困难。
解决：
通过flatMap和map方法对数据进行预处理，确保数据格式一致：

		// 处理数据并设置数据源
        const formattedData = athletesData.flatMap((item) =>
          item.Participations.flatMap((participation) =>
            participation.Disciplines.map((discipline) => {
              const photo = photosData.content.find(
                (photo) =>
                  photo.titleUrlSegment ===
                  `${participation.PreferredFirstName.toLowerCase()}-${participation.PreferredLastName.toLowerCase()}`
              );

              return {
                key: `${participation.ResultId}-${discipline.DisciplineId}`,
                countryName: item.CountryName,
                countryCode: item.CountryCode,
                athleteName: `${participation.PreferredLastName} ${participation.PreferredFirstName}`,
                gender: participation.Gender === "0" ? "男" : "女",
                DOB: participation.DOB,
                discipline: discipline.DisciplineName,
                photoUrl: photo ? `${photo.imageUrl}` : "", // 获取头像照片URL
                flagUrl: `https://www.worldaquatics.com/resources/v2.12.4/i/elements/flags/${item.CountryCode.toLowerCase()}.png`,
                infoUrl: `https://www.worldaquatics.com/athletes/${participation.ResultId}/${participation.PreferredLastName}-${participation.PreferredFirstName}`,
              };
            })
          )
        );

四、成果展示

五、技术总结

最开始在编写运动员信息表的时候，想的是通过硬编码的方式解决，但是发现数据太多了，一个一个填入数据不显示。因此便想到使用解析json数据的方式来一次性获取全部数据。首先在游泳锦标赛网站上获取相应的json数据。然后解析json数据，并通过使用react框架以及提供的相应组件库来显示数据。
React的组件化架构和虚拟DOM可以轻松地构建复杂的用户界面，而Ant Design提供的丰富UI组件则让界面设计变得更加简单。最大的挑战应该是在数据解析和展示方面，尤其是处理不同来源数据格式不一致的情况。通过不断地学习和尝试，也逐渐掌握了处理这些问题的技巧，对前端的数据显示也有了更好的处理技巧。
总的来说，学习技术是一个持续探索、发现问题和解决问题的过程，尽管会遇到一些困难，但只要肯学习，肯用功，一定能够有所收获。

六、参考文献

• React中文文档
• Ant Design
• 如何利用async/await来配合fetch() API请求