React中按日期分组展示数组数据 实现重复表头字段复用

修改后的组件代码 #

import React from "react";

export class DisplayFeatures extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Feature: [],
      loading: true // 新增加载状态，处理数据未加载完成的情况
    };
  }

  componentDidMount() {
    this.DisplayFeatures();
  }

  DisplayFeatures() {
    fetch(REQUEST_URL)
      .then(response => response.json())
      .then((data) => {
        this.setState({
          Feature: data,
          loading: false
        });
      })
      .catch(err => console.error('数据加载失败:', err)); // 新增错误捕获
  }

  render() {
    const { Feature, loading } = this.state;
    
    // 数据加载中显示提示
    if (loading) {
      return <div>加载中...</div>;
    }

    // 无数据时显示提示
    if (Feature.length === 0) {
      return <div>暂无数据</div>;
    }

    // 从第一条数据提取公共的FeatureName和Date
    const { FeatureName, Date } = Feature[0];

    return (
      <div>
        <form>
          <table border="1"> {/* 加边框方便查看结构，可按需移除 */}
            {/* 表头区域：只渲染一次公共信息 */}
            <thead>
              <tr>
                <td colSpan="2">
                  <span style={{ fontSize: '16px', color: '#FFFFFF', fontWeight: 'bold' }}>{FeatureName}</span>
                </td>
              </tr>
              <tr>
                <td colSpan="2">{Date}</td>
              </tr>
              {/* 数据列标题 */}
              <tr>
                <th>FeatureID</th>
                <th>FeatureText</th>
              </tr>
            </thead>
            {/* 数据行：只渲染每条数据的独有内容 */}
            <tbody>
              {Feature.map((item) => (
                <tr key={item.FeatureID}> {/* 必须添加唯一key，符合React列表渲染要求 */}
                  <td>{item.FeatureID}</td>
                  <td>{item.FeatureText}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </form>
      </div>
    );
  }
}

export default DisplayFeatures;

关键改动说明 #

• 提取公共表头：从第一条数据中取出FeatureName和Date，放在<thead>区域仅渲染一次，彻底解决重复显示问题
• 修复结构错误：移除了原代码中嵌套在<tbody>里的<div>（不符合HTML表格规范），修正了多余的闭合标签，给列表行添加了唯一key
• 优化状态与体验：删除了state中冗余的单个字段，新增loading状态处理加载过程，添加错误捕获和无数据提示
• 替换过时标签：用内联样式替代已废弃的<font>标签，符合HTML5规范

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