陣列不映射

當此代碼加載所有我看到的是一個空白的地圖。標記（子組件）不是呈現。我試圖爲按鈕創建一個過濾器，但現在讓我們忽略，直到我們可以讓標記出現。任何輸入將不勝感激！陣列不映射

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

來源

2017-02-19 Emil Juboori

嘗試使用調試器陣列的地圖功能看看它是否循環良好，你會得到你所期望的。 –

您使用的是哪個版本的google-maps-react？ –

1.0.19是我使用的版本@DamienLeroux –

有載，this.state.selectedFilter是undefined。結果，incidents.filter((i) => i.incident_type === this.state.selectedFilter)返回一個空數組，並且沒有標記生成。

您可以初始化selectedFilter看到至少一個標記：

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>

來源

2017-02-21 14:25:37

回答

相關問題