React: Visa en bild i taget

2018-03-19, 10:46 #1

Medlem

Reg: May 2013

Inlägg: 127

Hej där!

Jag försöker få fram en bild i taget från en array i Javascript men lyckas ej utan error

Kod:


constructor (props) {

    super(props);

    this.state = {

      list:[ {url: 'bild1.jpg'},  {url: 'bild2.jpg'}, {url: 'bild3.jpg'} ],

      selected_item: 0

    }

  }

Kod:


{this.state.list[ this.state.selected_item ].url }

Kod:

TypeError: Cannot read property 'url' of undefined
Swiper.render
swiper.js:99
   96 |   <div  className="container-fluid">
   97 |
   98 | 
>  99 |       { this.state.list[this.state.selected_item].url }
  100 | 
  101 |    </div>
  102 | );
View compiled
▶ 14 stack frames were collapsed.

Vad är det jag för fel?

Tack på förhand!

Citera

2018-03-19, 12:13 #2

Moderator

Reg: Feb 2008

Inlägg: 16 618

Citat:

Ursprungligen postat av gay4cow

Hej där!

Jag försöker få fram en bild i taget från en array i Javascript men lyckas ej utan error

Kod:


constructor (props) {

    super(props);

    this.state = {

      list:[ {url: 'bild1.jpg'},  {url: 'bild2.jpg'}, {url: 'bild3.jpg'} ],

      selected_item: 0

    }

  }

Kod:


{this.state.list[ this.state.selected_item ].url }

Kod:

TypeError: Cannot read property 'url' of undefined
Swiper.render
swiper.js:99
   96 |   <div  className="container-fluid">
   97 |
   98 | 
>  99 |       { this.state.list[this.state.selected_item].url }
  100 | 
  101 |    </div>
  102 | );
View compiled
▶ 14 stack frames were collapsed.

Vad är det jag för fel?

Tack på förhand!

Du får väl ta reda på vad som är undefined. Kan du konsolla ut din lista, och kan du konsolla ut elementet this.state.list[this.state.selected_item].url?

Får du ut nåt vettigt då?

Citera

2018-03-19, 18:22 #3

Medlem

Reg: May 2013

Inlägg: 127

Citat:

Ursprungligen postat av Proton

Du får väl ta reda på vad som är undefined. Kan du konsolla ut din lista, och kan du konsolla ut elementet this.state.list[this.state.selected_item].url?

Får du ut nåt vettigt då?

Får bara "Uncaught TypeError: Cannot read property 'url' of undefined"

Citera

2018-03-19, 22:03 #4

Moderator

Reg: Feb 2008

Inlägg: 16 618

Citat:

Ursprungligen postat av gay4cow

Får bara "Uncaught TypeError: Cannot read property 'url' of undefined"

Vad händer om du konsollar ut listan då? Skit i att plocka ut urlen, hur ser listan ut?

Citera

2018-03-20, 06:48 #5

Medlem

Reg: Oct 2011

Inlägg: 508

Tror det är bättre om du visar upp hela koden utan att klippa ut små bitar av koden.

Möjliga fel kan vara:

du har någon {list.map(function(x)..... (innuti render, så är det inte samma this)
Använder du den gammla React.createClass ?

Annars sätt 1 bryt punkt i toppen av RENDER functionen och skriv ut this.state

Om du vill ha mer hjälp så kan du få det UTAN att folk behöver gissa sig fram till vad som kan vara fel..
skeppa med hela React componenten

Citera

2018-03-20, 11:28 #6

Medlem

Reg: Apr 2013

Inlägg: 7 985

Citat:

Ursprungligen postat av gay4cow

Hej där!

Jag försöker få fram en bild i taget från en array i Javascript men lyckas ej utan error

Kod:


constructor (props) {

    super(props);

    this.state = {

      list:[ {url: 'bild1.jpg'},  {url: 'bild2.jpg'}, {url: 'bild3.jpg'} ],

      selected_item: 0

    }

  }

Kod:


{this.state.list[ this.state.selected_item ].url }

Kod:

TypeError: Cannot read property 'url' of undefined
Swiper.render
swiper.js:99
   96 |   <div  className="container-fluid">
   97 |
   98 | 
>  99 |       { this.state.list[this.state.selected_item].url }
  100 | 
  101 |    </div>
  102 | );
View compiled
▶ 14 stack frames were collapsed.

Vad är det jag för fel?

Tack på förhand!

Är det där verkligen giltig JSX?
Vill du inte göra

Kod:

{this.state.list.map( (item) => { item.url })}

Citera

React: Visa en bild i taget

Stöd Flashback