React使用嵌套map渲染Carousel轮播图图片不显示问题咨询

• 核心问题：内层嵌套的map回调函数没有返回JSX元素。你可正常运行的单map代码使用的是() => (<div/>)形式的箭头函数隐式返回，而问题代码的内层map使用普通函数声明，包裹的JSX节点没有添加return语句，函数默认返回undefined，导致内层遍历没有任何内容渲染。
• 可选排查点：若修改后仍无内容，可在map回调中打印organization2、events等值，确认遍历的数据源不为空。

有两种可行修改方式：

1. 给内层普通函数添加return语句
2. 将内层函数改为箭头函数隐式返回的写法

<Carousel
  responsive={responsive}
  ssr
  infinite
  itemClass="carouselItem"
  draggable={true}
  deviceType="desktop"
>
  {Object.keys(props).map(function (organizationId, index) {
    const organization2 = props[organizationId];
    const events = organization2.events;
    return (
      <div key={organizationId}>
        {/* 这里给内层map添加return，同时优化变量引用，避免重复链式调用 */}
        {Object.keys(events).map(function (programId, index) {
          const currentEvent = events[programId];
          return (
            <div key={currentEvent.imgId}>
              <Image
                src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${currentEvent.imgId}_0.cover.jpg`}
                className={styles.carouselImage}
                layout="responsive"
                width={865}
                height={513}
                key={currentEvent.imgId}
                priority={true}
              />
              <div>{currentEvent.name}</div>
              <div>{organization2.name}</div>
            </div>
          );
        })}
      </div>
    );
  })}
</Carousel>

内容的提问来源于stack exchange，提问作者János