React JS遍历渲染手风琴组件：按日期分组展示对应时间记录

核心改造分为3步，直接适配你提到的「日期作为唯一标题、同日期所有记录放在同一内容区」需求：

• 第一步：对原始predefined数组按日期做分组归集，把同一天的所有记录放到同一个分组下
• 第二步：把原有的全局isActive状态改成按日期维度管理，可选择支持多手风琴同时展开、或手风琴互斥展开两种模式
• 第三步：遍历分组后的数据渲染手风琴，每个日期对应一个手风琴项，内容区遍历渲染该日期下的全部记录

1. 数据分组代码 #

首先对原始数据做预处理，按日期归类：

// 分组后得到结构：{ '2024-05-20': [记录1, 记录2], '2024-05-21': [记录3] }
const groupedByDate = predefined.reduce((acc, record) => {
  const { date } = record
  if (!acc[date]) acc[date] = []
  acc[date].push(record)
  return acc
}, {})
// 转为数组方便后续遍历渲染
const dateGroups = Object.entries(groupedByDate)

2. 状态逻辑调整 #

方案A：支持同时展开多个日期手风琴 #

import { useState } from 'react'

// 状态存储所有已展开的日期集合
const [activeDates, setActiveDates] = useState(new Set())

const toggleAccordion = (date) => {
  const newActive = new Set(activeDates)
  newActive.has(date) ? newActive.delete(date) : newActive.add(date)
  setActiveDates(newActive)
}

方案B：互斥展开，一次只打开一个日期手风琴 #

import { useState } from 'react'

// 状态存储当前展开的日期，null为全部收起
const [activeDate, setActiveDate] = useState(null)

const toggleAccordion = (date) => {
  setActiveDate(activeDate === date ? null : date)
}

3. 渲染代码（以多开方案为例） #

return (
  <>
    <div className="accordion">
      {dateGroups.map(([date, records]) => {
        const isActive = activeDates.has(date)
        return (
          <div className="accordion-item" key={date}>
            <div
              className="accordion-title"
              onClick={() => toggleAccordion(date)}
            >
              <div>{date}</div>
              <div>共{records.length}条记录</div>
              <div>{isActive ? "-" : "+"}</div>
            </div>
            {isActive && (
              <div className="accordion-content">
                {records.map((record, idx) => (
                  <div key={idx} className="record-item">
                    <span>{record.time}</span>
                    <span>painscale: {record.painscale}</span>
                    {/* 其他需要展示的记录字段按需补充 */}
                  </div>
                ))}
              </div>
            )}
          </div>
        )
      })}
    </div>
  </>
)

• 原有代码中硬编码的时间、painscale数值都可以替换为从record对象中动态读取的字段，按需调整展示逻辑即可
• 如果需要默认展开某个日期，初始化状态时把对应日期加入状态集合即可

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