使用React-Google-Maps和Redux顯示標記的異步

我試圖從React-Redux狀態呈現Google地圖上的標記，但是我收到錯誤「無法讀取未定義的屬性」映射「和」無法讀取空的特性「_currentElement」」使用React-Google-Maps和Redux顯示標記的異步

這裏是我的組件：

class Map extends Component { 
    constructor() { 
    super() 
    this.state = {} 
    } 

    componentDidMount() { 
    APIManager.get('/api/hike', null, (err, response) => { 
     if (err) { 
     return 
     } 
     this.props.hikesReceived(response.results) 
    }) 
    } 

    componentDidUpdate() { 
    console.log('updated list of hikes ' + JSON.stringify(this.props.hikes)) 
    } 

    render() { 
    const hikes = this.props.hikes.map((hike, i) => { 
     const hikeMarker = { 
     latlng: { 
      lat: hike.location.lat, 
      lng: hike.location.lng 
     } 
     } 
     return <Markey key={i} {...hikeMarker} /> 
    }) 

    return (
     <GoogleMapLoader 
     containerElement = { this.props.mapContainer } 
     googleMapElement = { 
      <GoogleMap 
      defaultZoom={10} 
      defaultCenter={this.props.center} 
      options={{streetViewControl: false, mapTypeControl: false}} 
      onClick={this.addMarker.bind(this)} > 
      <Marker {...hikeMarker}/> 
      </GoogleMap> 
     } /> 
    ) 
    } 
} 

const stateToProps = (state) => { 
    return { 
    hikes: state.hike.list, 
    } 
} 

const dispatchToProps = (dispatch) => { 
    return { 
    hikesReceived: (hikes) => dispatch(actions.hikesReceived(hikes)), 
    } 
} 

export default connect(stateToProps, dispatchToProps)(Map)

我知道這是一個異步的問題，因爲執行console.log（）發生兩次。第一次是空的，第二次是用數據渲染的。當我使用虛擬數據時，標記也會顯示沒有錯誤。

一旦有this.props中的數據，我該如何去告訴地圖等待渲染或重新渲染？

來源

2017-02-02 crash springfield

，你可以檢查未定義/空數據/ null或什麼，然後就返回false –

我已經試過「如果（this.props.hikes == NULL ||未定義） {return：false}「，它只是兩次渲染錯誤 –

其實」false「起作用。前端和後端之間存在可變的命名問題。謝謝@elsololobo！ –

問題的一半是名稱在數據庫中更改。另一半與解決：

if (this.props.hikes == null || undefined) {return: false}

來源

2017-02-02 16:01:07

使用React-Google-Maps和Redux顯示標記的異步

回答

相關問題