为什么旋转木马不呈现图像?在React中嵌套映射有什么问题?

Question

我填充carousel的方式有问题。这里嵌套了两个循环。我用"键"根据需要。没有渲染。你看到哪里不对了吗?

<Carousel
responsive={responsive}
ssr
infinite
itemClass="carouselItem"
draggable={true}
deviceType="desktop"
>
{Object.keys(props).map(function (organizationId, index) {
let organization2 = props[organizationId];
let events = organization2.events;
return (
<div key={organizationId}>
{Object.keys(events).map(function (programId, index) {
<div key={`${props[organizationId].events[programId].imgId}`}>
<Image
src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`}
className={styles.carouselImage}
layout="responsive"
width={865}
height={513}
key={`${props[organizationId].events[programId].imgId}`}
priority={true}
/>
<div>{props[organizationId].events[programId].name}</div>
<div>{props[organizationId].name}</div>
</div>;
})}
</div>
);
})}
</Carousel>

很奇怪，当map没有嵌套时，它在这里工作:

<Carousel
responsive={responsive}
ssr
infinite
itemClass="carouselItem"
draggable={true}
deviceType="desktop"
>
{imageUrls &&
imageUrls.map((url: string, index: number) => (
<div>
<Image
src={url}
className={styles.carouselImage}
layout="responsive"
width={865}
height={513}
key={url}
priority={true}
/>
<div></div>
hello
</div>
))}
</Carousel>

Answer 1

{Object.keys(events).map(function (programId, index) {
<div key={`${props[organizationId].events[programId].imgId}`}>

在第二次map回调中，没有return关键字。