Schutz vor leeren verschachtelten Arrays im Status

Question

Ich habe momentan eine kleine Reaktivreduktionsanwendung, wo ich Filme hinzufüge und Bilder als verschachteltes Array innerhalb meines Objekts hinzufüge.

Was mein Zustand aussieht, nachdem ein Element hinzugefügt

{ 
    movies: [ 
    0:{ 
    "title": "asda", 
    "director": "asda", 
    "genre": "asd", 
    "description": "asd", 
    "images": [ 
     { 
     "name": "george-michael-306600-2-raw.jpg", 
     "type": "image/jpeg", 
     "size": "65 kB", 
     "base64": "data:image/jpeg;base64,/9j/IMAGE//Z", 
     "file": {} 
     } 
    ], 
    "id": "ae04f1e8-18bb-434b-a3e3-b02d44e68d2a" 
    } 
} 

Dann mache ich es in meiner Komponente wie folge

import React from 'react' 
import Slider from 'react-slick' 
import { dispatch, connect } from 'react-redux' 
import {Icon} from 'react-fa' 
import { deleteMovie } from '../../actions/movieActions' 

import 'slick-carousel/slick/slick.css' 
import 'slick-carousel/slick/slick-theme.css' 
import './MovieList.scss' 

class MovieList extends React.Component{ 
    constructor(props){ 
    super (props) 
    } 

    handleClick(id) { 
    dispatch(deleteMovie(id)) 
    } 

    render() { 
    // Settings for slick-carousel 
    let settings = { 
     infinite: true, 
     speed: 500 
    } 


    return (
     <div className='col-lg-12'> 
     {this.props.movies.map((b, i) => 
      <div key={i} className="col-lg-2"> 
      <Slider {...settings}> 
       {b.images.map((b, z) => 
       <div className="img-wrapper"> 
        <Icon name="trash" className="trash-icon" onClick={(e) => 
        console.log(this.props.movies[i].id), 
        this.props.onMovieClick.bind(this.props.movies[i].id) 
        }/> 
        <img className="img-responsive" key={z} src={b.base64}></img> 
       </div> 
      )} 
      </Slider> 
      <div className="text-left info"> 
       <h2>{b.title}</h2> 
       <p>{b.genre}</p> 
      </div> 
      </div> 
     )} 
     </div> 
    ) 
    } 
} 

// map state from store to props 
const mapStateToProps = (state) => { 
    return { 
    movies: state.movies 
    } 
}; 

// Map actions to props 
const mapDispatchToProps = (dispatch) => { 
    return { 
    onMovieClick: (id) => { 
     dispatch(deleteMovie(id)) 
    } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MovieList) 

Jetzt funktioniert die perfekt finden und meine Einzelteile machen als beabsichtigt, bis ich versuche, ein Element zu filtern (löschen), dann meine innere Schleife, um die Bilder in den Schieberegler {b.images.map((b, z) schlägt fehl und ich bekomme einen Fehler

Cannot read property 'map' of undefined

Wie kann ich diese innere Schleife schützen versuchen, Gegenstände zu machen, wenn Array leer/nicht definiert ist?

In regulären JS würde ich einfach meinen Map-Aufruf in eine Überprüfung einbinden, um zu sehen, ob Bilder undefiniert sind, aber wie behandelt man dieses Problem in einem JSX-Renderblock?

Danke für Ihre Hilfe

Answer 1

es zum Schutz vor Ihnen eine Existenzprüfung, bevor Sie die Karte wie diese verwenden:

{b.images && b.images.map((b, z) => 
    <div className="img-wrapper"> 
     <Icon name="trash" className="trash-icon" onClick={(e) => 
      console.log(this.props.movies[i].id), 
      this.props.onMovieClick.bind(this.props.movies[i].id) 
     }/> 
     <img className="img-responsive" key={z} src={b.base64}></img> 
    </div> 
)} 

b.images wird überprüfen, ob b.images definiert ist und führen Sie dann die Karte. Sonst wird es nichts rendern.