Uncaught TypeError：google-mapsと反応してnullのプロパティ 'props'を読み取ることができません

Question

google-maps-reactを使用して反応し、地図上の一部のデータを表示しています。マーカーがクリックまたはホバリングされたときにツールチップを表示します。そのためには、私はgoogle-maps-reactに付属の 'InfoWindown'コンポーネントを使うことができると思うが、 'nullのプロパティ'小道具を読むことができないというエラーが出る。ここで

は私のコード..です

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

私はすべての私のコールバック関数は罰金だと思いますが、「情報ウィンドウ」コンポーネントが私に迷惑を与えるものであると私には思えます。誰もこの事を使う方法を知っていますか？

は、私は問題がonClick={this.onMarkerClick}であると仮定し、

Answer 1

、ありがとうございました。コールバック内のthisは、その外側と同じではありません。

次のコードを使用してマーカーのonClickプロパティを設定すると機能しますか？矢印の機能について

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

より：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.