Uncaught TypeError: Kann Property 'Requisiten' von null in Reagieren mit google-maps nicht lesen

Question

Ich benutze google-maps-react und reagiere, um einige Daten auf der Karte anzuzeigen und jetzt bin ich an dem Punkt, wo ich will Tooltip anzeigen, wenn Marker angeklickt oder verschoben wird Dafür denke ich, dass ich 'InfoWindown' Komponente verwenden kann, die mit dem Google-Maps-Reagieren kommt, aber es gibt mir einen Fehler 'Eigenschaft' Requisiten 'von null kann nicht gelesen werden.

Hier ist mein Code ..

import React, { Component } from 'react'; 
import Map, { Marker, InfoWindow } from 'google-maps-react'; 

export default class GoogleMap extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     showingInfoWindow: false, 
     activeMarker: {}, 
     selectedPlace: {} 
    }; 

    this.renderTrucks = this.renderTrucks.bind(this); 
    this.onMarkerClick = this.onMarkerClick.bind(this); 
    } 

    onMarkerClick(props, marker, e) { 
    this.setState({ 
     selectedPlace: props, 
     activeMarker: marker 
    }); 
    } 

    renderTrucks() { 
    if (this.props.list.length === 0) { 
     return; 
    } 
    return this.props.list.map((truckInfo) => { 
     return (<Marker 
     key={truckInfo.objectid} 
     name={truckInfo.applicant} 
     onClick={this.onMarkerClick} 
     position={{lat:truckInfo.latitude, lng:truckInfo.longitude}} /> 
    ); 
    }); 
    } 


    render() { 
    return (
     <Map google={window.google} 
     className={'map'} 
     style={{width: '50%', height: '80%', position: 'relative'}} 
     zoom={13}> 
     {this.renderTrucks()} 

     <InfoWindow 
      marker={this.state.activeMarker} 
      visible={this.state.showingInfoWindow}> 
      <p>{this.state.selectedPlace.name}</p> 
     </InfoWindow>   
     </Map> 
    ); 
    } 
} 

Ich denke, alle meine Callback-Funktionen sind in Ordnung, aber es scheint mir, dass ‚Infofenster‘ Komponente ist derjenige, der mir ein Problem gibt. Kann jemand dieses Ding benutzen?

Danke,

Answer 1

Ich nehme das Problem mit onClick={this.onMarkerClick} ist. this im Callback ist nicht das Gleiche wie außerhalb davon.

Funktioniert es, wenn Sie den folgenden Code verwenden, um die onClick-Eigenschaft für den Marker festzulegen?

onClick={(props, marker, e) => this.onMarkerClick(props, marker, e)} 

Mehr über Pfeil Funktionen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

An arrow function does not create its own this context, so this has the original meaning from the enclosing context.