如何在React.js中按月份动态渲染API返回的数组数据？

一、显示所有月份的事件数据 #

你的API返回数据结构是数组包裹单个键值对对象，每个键为月份名称，值是对应事件数组。可以通过两层map遍历，结合Object.entries提取月份和事件列表：

import React from 'react';

const EventList = ({ eventsData }) => {
  return (
    <div className="event-container">
      {eventsData.map((monthItem, index) => {
        // 提取当前项的月份名称和事件数组
        const [monthName, events] = Object.entries(monthItem)[0];
        return (
          <div key={index} className="month-section">
            <h2>{monthName}</h2>
            {/* 遍历当前月份的所有事件 */}
            {events.map((event, eventIndex) => (
              <div key={eventIndex} className="event-card">
                <p>event - {event.event.trim()}</p>
                <p>title - {event.title}</p>
                <p>startDate - {event.startDate}</p>
                <p>endDate - {event.endDate}</p>
                {/* 事件间添加分隔线（最后一个事件不加） */}
                {eventIndex !== events.length - 1 && <hr />}
              </div>
            ))}
          </div>
        );
      })}
    </div>
  );
};

// 页面组件中使用
const App = () => {
  // API返回的原始数据
  const arr = [
    {
        MARCH: [
            {
                "iD": "67854",
                "event": " closed",
                "title": "test",
                "startDate": "2024-06-20",
                "endDate": "2024-07-25"
            }
        ]
    },
    {
        APRIL: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    },
    {
        MAY: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    }
  ];

  return <EventList eventsData={arr} />;
};

export default App;

二、切换显示单个月份数据 #

如果需要只展示选中月份的数据，可以添加下拉选择器，结合useState维护选中状态：

import React, { useState } from 'react';

const EventList = ({ eventsData }) => {
  // 提取所有月份名称
  const allMonths = eventsData.map(item => Object.keys(item)[0]);
  // 默认选中第一个月份
  const [selectedMonth, setSelectedMonth] = useState(allMonths[0]);
  // 获取选中月份对应的事件数组
  const selectedEvents = eventsData.find(item => Object.keys(item)[0] === selectedMonth)[selectedMonth];

  return (
    <div className="event-container">
      {/* 月份选择下拉框 */}
      <select 
        value={selectedMonth} 
        onChange={(e) => setSelectedMonth(e.target.value)}
        className="month-select"
      >
        {allMonths.map(month => (
          <option key={month} value={month}>{month}</option>
        ))}
      </select>

      <div className="month-section">
        <h2>{selectedMonth}</h2>
        {selectedEvents.map((event, eventIndex) => (
          <div key={eventIndex} className="event-card">
            <p>event - {event.event.trim()}</p>
            <p>title - {event.title}</p>
            <p>startDate - {event.startDate}</p>
            <p>endDate - {event.endDate}</p>
            {eventIndex !== selectedEvents.length - 1 && <hr />}
          </div>
        ))}
      </div>
    </div>
  );
};

// App组件同上述示例，省略重复代码
const App = () => {
  const arr = [/* API返回数据 */];
  return <EventList eventsData={arr} />;
};

export default App;

样式优化建议 #

添加以下CSS可以让UI更接近你的期望效果：

.event-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.month-select {
  padding: 8px 12px;
  font-size: 16px;
  margin-bottom: 20px;
}

.month-section h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 8px;
}

.event-card {
  margin: 15px 0;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.event-card p {
  margin: 5px 0;
  font-size: 14px;
}

hr {
  border: none;
  border-top: 1px solid #dee2e6;
  margin: 15px 0;
}

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