如何从数组中为每个手风琴项目获取不同的对象集

Question

所以目前我的三个手风琴项目都有相同的对象集，这不是我想要的。我想每个有三套不同的。以下是我迄今为止尝试过的，但显然不起作用：

const meetingRooms = [
{
name: ["title-1", "title-2", "title-3"],
title: "Project1",
value: ["item-1", "item-2", "item-3"],
date: "2021-12-19 17:18:00",
content: "Example content",
contentValue: ["content1", "content2", "content3"]
},
{
name: ["second-title-1", "second-title-2", "second-title-3"],
title: "Project2",
value: ["item-4", "item-5", "item-6"],
content: "Example content1",
date: "2021-12-19 17:18:00",
contentValue: [{val1:"more content1", val2:"more content1", val3:"more content1"}, {val1:"more content2", val2:"more content2" ,val3:"more content2"}, {val1:"more content3", val2:"more content3", val3:"more content3"}]
},
{
name: ["third-title-1", "third-title-2", "third-title-3"],
title: "Project3",
value: ["item-7", "item-8", "item-9"],
content: "Example content",
date: "2021-12-19 17:18:00",
contentValue: ["surprise content1", "surprise content2", "surprise content3"]
}
];

{meetingRooms.map((m) => (
<NotificationColumn>
<Header>
{m.name}
</Header>
<Accordion
type="single"
collapsible
>
{m.value.map((v, idx)=>
<AccordionItem value={m.value[idx]}>
<AccordionTrigger>{m.name[idx]}</AccordionTrigger>
{m.contentValue.map((v, idx)=>
<AccordionContent  key={idx}>
{m.contentValue[idx]}
</AccordionContent>
)}
</AccordionItem>
)}
</Accordion>

Answer 1

您在第二个循环中重新定义了v和idx，这就是为什么它一直在混合索引

您的代码：

{m.value.map((v, idx)=>
<AccordionItem value={m.value[idx]}>
<AccordionTrigger>{m.name[idx]}</AccordionTrigger>
{m.contentValue.map((v, idx)=>
<AccordionContent  key={idx}>
{m.contentValue[idx]}
</AccordionContent>
)}
</AccordionItem>
</AccordionItem>
}}

如何修复

{m.value.map((firstValue, firstIndex)=>
<AccordionItem value={m.value[firstIndex]}>
<AccordionTrigger>{m.name[firstIndex]}</AccordionTrigger>
{m.contentValue.map((secondValue, secondIndex)=>
<AccordionContent  key={secondIndex}>
{m.contentValue[secondIndex]}
</AccordionContent>
)}
</AccordionItem>
</AccordionItem>
}}

更好的代码，使用地图提供的值，而不是

{m.value.map((firstValue, firstIndex)=>
<AccordionItem value={ firstValue }>
<AccordionTrigger>{m.name[firstIndex]}</AccordionTrigger>
{m.contentValue.map((secondValue, secondIndex)=>
<AccordionContent  key={ secondIndex }>
{ secondValue }
</AccordionContent>
)}
</AccordionItem>
</AccordionItem>
}}