配列はマッピングされていません

Question

このコードがロードされると、空白のマップが表示されます。マーカー（子コンポーネント）はレンダリングされません。私はボタンのフィルターも作成しようとしていましたが、マーカーを表示するまで無視しています。どんな入力をいただければ幸いですか？

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

負荷時、this.state.selectedFilterはundefinedです。その結果、incidents.filter((i) => i.incident_type === this.state.selectedFilter)は空の配列を返し、マーカーは生成されません。

かを確認するためにselectedFilterを初期化することができる少なくとも1つのマーカー：あなたは、マーカーを見るかどうかを確認するために、フィルタを削除することができます

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

または：

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