reactjs nullcheck avant mappage à travers un tableau de marqueurs

Question

Bonjour, j'essaie de mapper un tableau de marqueurs, mais le premier objet est vide. Comment puis-je faire un Nullcheck dans JSX afin que seuls les marqueurs apparaissent sur la carte qui ne sont pas vides. la fonction est dans le const GettingStartedGoogleMap.

const GettingStartedGoogleMap = withGoogleMap(props =>(
    <GoogleMap 
     defaultZoom={13} 
     center={props.center} 
     > 
     {if(props.markers !== undefined && props.markers != null && props.markers.length > 0) 
     {props.markers.map(marker => (
      <InfoWindow position={{ lat: marker.latitude, lng: marker.longitude }} 
      key={marker.id}> 
       <div> 
       {marker.price} 
       </div> 
      </InfoWindow> 
     ))} 
     } 
</GoogleMap> 
)); 

export class AppMap extends Component { 

constructor(props) { 
    super(props); 
    this.Ref = firebase.database().ref().child('app').child('cards'); 
    this.state = ({ 
    markers : [{ 
     latitude: "", 
     longitude: "", 
     price: "", 
     id: "" 
    }] 
    }) 
} 

componentWillUpdate(){ 
    const previousMarker = this.state.markers; 
    this.Ref.orderByChild('address').equalTo(this.props.city) 
     .on('child_added', snap => { 
     previousMarker.push({ 
     latitude: snap.node_.children_.root_.right.left.value.children_.root_.left.value.value_, 
     longitude: snap.node_.children_.root_.right.left.value.children_.root_.value.value_, 
     price: snap.node_.children_.root_.value.value_, 
     key: snap.key + "_Marker", 

     }) 

     console.log(previousMarker) 

     }) 
} 


    render() { 
     return (
      <div style={{height: `400px`}}> 
       <GettingStartedGoogleMap 
       containerElement={ 
       <div style={{ height: `100%` }} /> 
       } 
       mapElement={ 
       <div style={{ height: `100%` }} /> 
       } 

       center={this.props.center} 
       markers={this.state.markers} 

       googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" 
       /> 
      </div> 
     ); 
    } 
    } 

Answer 1

Vous pouvez utiliser l'opérateur && pour vérifier Falsy values

const GettingStartedGoogleMap = withGoogleMap(props => (
    <GoogleMap 
     defaultZoom={13} 
     center={props.center} 
    > 
     { 
      props.markers && props.markers.map(marker => { 
       return marker && (
        <InfoWindow position={{ lat: marker.latitude, lng: marker.longitude }} 
         key={marker.id}> 
         <div> 
          {marker.price} 
         </div> 
        </InfoWindow> 
       ) 
      }) 
     } 
    </GoogleMap> 
));