数组未映射

Question

When this code loads all I see is a blank map. The markers (child component) are not rendering. I was trying to create a filter for the buttons as well but lets ignore for now until we can get the markers to appear. Any input would be appreciated!

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

On load, this.state.selectedFilter is undefined . As a result, incidents.filter((i) => i.incident_type === this.state.selectedFilter) return a blank array and no markers are generated.

You can init selectedFilter to see at least one marker:

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

Or you can remove the filter to see if you see the markers:

<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>