react js:通过accordion映射

Question

我正在尝试创建一个accoration我想要一个日期作为住宿标题只有一个和每条记录在那个时间内发生的住宿内容

<div className="accordion">
{predefined.map(({ date ,time }) => (
<div className="accordion-item">
<div
className="accordion-title"
onClick={() => setIsActive(!isActive)}
>
<div>{date}</div> <div>11:45</div> <div>painscale</div>
<div>4</div>
<div>{isActive ? "-" : "+"}</div>
</div>
{isActive && <div className="accordion-content">{time}</div>} /// every time in a day a record is created must apperar here
</div>
))}
</div>
</>
);

}

Answer 1

你应该先映射你的数据，像这样:

const data = [
{ id: 1, date: "2021-10-04", time: "18:00" },
{ id: 1, date: "2021-10-04", time: "19:00" },
{ id: 1, date: "2021-10-05", time: "20:00" },
{ id: 1, date: "2021-10-05", time: "21:00" }
];
let mapped = data.reduce((r, a) => {
r[a.date] = [...(r[a.date] || []), a];
return r;
}, {});

，然后循环遍历简化后的对象的值，像这样:

{Object.values(mapped).map((item, index) => (
<div key={index}>
<h1>
Section {item[0].date}
</h1>
<div>
{item.map((e) => {
return <p key={e.time}>{e.time}</p>;
})}
</div>
</div>
))}

你应该把这个应用到你的例子中。