Question

我有这个状态

theatre: [
  {
    "naslov": "Dear Elena Sergeevna",
    "id": "t00",
    "godina": "2015.",
    "naslovnaSlika": "http://xx.com/content/djs_prez.png",
    "naslovKlasa": "sergeevna_naslov",
    "nazivGalerije": ["http://xx.com/content/skulpture/skp4.jpg", "http://xx.com/content/skulpture/skp3.jpg", "http://xx.com/content/skulpture/skp5.jpg", "http://xx.com/content/skulpture/skp0.jpg"],
    "slikaKlasa": "sergeevna"
  }, {
    "naslov": "Osecaj brade",
    "id": "t01",
    "godina": "2017.",
    "naslovnaSlika": "http://x.com/content/Osecaj-brade_prez.png",
    "naslovKlasa": "osecajbrade_naslov",
    "nazivGalerije": [{"1":"http://xx.com/content/skulpture/skp4.jpg"}, {"2":"http://xx.com/content/skulpture/skp3.jpg"}, {"3":"http://xx.com/content/skulpture/skp5.jpg"}, {"4":"http://xx.com/content/skulpture/skp0.jpg"}],
    "slikaKlasa": "osecajbrade"
  }
]

我通过事件监听器得到一个对象，当我将其打印出来时，我得到了整个对象。我想使用“ nazivGalerije”中的链接，并制作一个循环以打印出图像。

这是我正在尝试的方法，但是不起作用

const ContainerTheatre = (props) => {
  return (
      <div className={props.klasa.join(' ')}>
        <div className="text_segment">
        console.log{props.selectedTheatre.nazivGalerije}
        <p>{props.selectedTheatre.naslov}</p>
        {props.selectedTheatre.nazivGalerije.map(slika => {
          return <ImageLoop
                    url={slika} />
                  })}
        </div>
        <img onClick={props.zatvori} src="http://xx.com/content/close_w.png" alt="close" className="close-popup" />
      </div>
  )
}

“ selectedTheatre”是我传递来知道被单击的对象的单个对象。我想要的是通过

将所有链接从数组传递到另一个组件

{props.selectedTheatre.nazivGalerije.map(slika => {
              return <ImageLoop
                        url={slika} />
                      })}

这可能是最糟糕的方法，因此感谢所有建议

Answer 1

您需要对嵌套对象进行条件检查，然后才能像下面那样访问它们

此外，您还需要为地图内的ImageLoop元素设置唯一键，如下所示，否则您将始终获得最后一个元素

更改

  {props.selectedTheatre.nazivGalerije.map(slika => {
          return <ImageLoop
                    url={slika} />
                  })}

收件人

 {props.selectedTheatre && props.selectedTheatre.nazivGalerije && props.selectedTheatre.nazivGalerije.map((slika, index)=> {
          return <ImageLoop Key={'Key-'+index} url={slika} />
  })}

Reactjs映射嵌套数组以加载<img/>标签中的图像URL

1 个答案: