为什么轮播不渲染图像？ React 中的嵌套地图有什么问题？

Question

我填充轮播的方式有问题。有两个循环嵌套。我根据需要使用“密钥”。没有渲染。看到哪里不对了吗？

<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>

奇怪，当地图没有嵌套时，它在这里工作：

<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 关键字。

为什么轮播不渲染图像？ React 中的嵌套地图有什么问题？

Why carousel does not render images? What is wrong with nested map in React?

javascript

carousel

reactjs