Reactjs映射嵌套阵列加载在标记图像网址

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} />
  })}