Array ist nicht Mapping

Question

Wenn dieser Code lädt alles, was ich sehe, ist eine leere Karte. Die Markierungen (untergeordnete Komponente) werden nicht gerendert. Ich habe versucht, auch einen Filter für die Buttons zu erstellen, aber lasse es erst einmal ignorieren, bis wir die Marker sehen können. Irgendwelche Eingaben würden geschätzt werden!

import React from 'react'; 
import {GoogleApiWrapper, Map} from 'google-maps-react'; 
import Marker from '../marker.js'; 
import { Button } from 'react-bootstrap'; 



class Layout extends React.Component { 
    constructor(props){ 
    super(props) 
     this.state = { 
     setFilter: '' 
     } 
    } 

    setFilter(event) { 
    this.setState({ selectedFilter: event.target.name }); 
    } 

    render() { 
    let incidents = [{lat: 32.575258, lng: -117.061613, incident_type: 'ems', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_ems.png'}, 
      {lat: 32.958337, lng: -117.096112, incident_type: 'fire', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_fire.png'}, 
      {lat: 32.728588, lng: -117.100064, incident_type: 'hazmat', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_hazmat.png'}, 
      {lat: 32.556325, lng: -117.055856, incident_type: 'mva', icon:'http://s3-us-west-1.amazonaws.com/et-icons/icon_report_mva.png'}, 
      {lat: 32.691563, lng: -117.072024, incident_type: 'fire', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_fire.png'}, 
      {lat: 32.805941, lng: -117.219577, incident_type: 'ems', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_ems.png' }, 
      {lat: 32.717516, lng: -117.164727, incident_type: 'hazmat', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_hazmat.png'}, 
      {lat: 32.715218, lng: -117.160156, incident_type: 'mva', icon:'http://s3-us-west-1.amazonaws.com/et-icons/icon_report_mva.png'}] 
    return (
     <div> 
     <div> 
      <Button bsStyle="primary" bsSize="sm" active>EMS</Button> 
      <Button bsStyle="danger" bsSize="sm" active>FIRE</Button> 
      <Button bsStyle="warning" bsSize="sm" active>HAZMAT</Button> 
      <Button bsStyle="info" bsSize="sm" active onClick={this.state.setFilter} name="MVA">MVA</Button> 
     </div> 
      <div ref="map"> 
      <Map google={this.props.google} 
       style={{width: '100%', height: '100%', position: 'relative'}} 
       className={'map'} 
       zoom={10} 
       initialCenter={{lat: 32.7157, lng: -117.1611}}> 
       {incidents.filter((i) => i.incident_type === this.state.selectedFilter).map(i => { 
      <Marker 
       incident_type={i.incident_type} 
       position={{lat: i.lat, lng: i.lng}} 
       icon={i.icon} /> 
      })} 
      </Map> 
      </div> 
     </div> 
    ) 
    } 
} 

export default GoogleApiWrapper({ 
    apiKey: 'AIzaSyB0P-Ql1Gdvu0baPK4xmQMchXxQoUk4YH8' 
})(Layout); 

Answer 1

Auf Last, this.state.selectedFilter ist undefined. Als Ergebnis geben ein leeres Array zurück und es werden keine Markierungen generiert.

können Sie selectedFilter init mindestens einen Marker, um zu sehen:

class Layout extends React.Component { 
    constructor(props){ 
    super(props) 
     this.state = { 
     setFilter: '', 
     selectedFilter: 'fire' 
     } 
    } 
    ... 
} 

Oder Sie den Filter entfernen, um zu sehen, ob Sie die Markierungen sehen:

<div ref="map"> 
    <Map google={this.props.google} 
     style={{ width: '100%', height: '100%', position: 'relative' }} 
     className={'map'} 
     zoom={10} 
     initialCenter={{ lat: 32.7157, lng: -117.1611 }}> 
     {incidents.map(i => { 
      <Marker 
       incident_type={i.incident_type} 
       position={{ lat: i.lat, lng: i.lng }} 
       icon={i.icon} /> 
     })} 
    </Map> 
</div>