Вызов функции за пределами рендеринга

Question

Я новичок в React и Apollo (GraphQL). Мне нужно отобразить слой, когда пользователь нажимает на маркер карты Google. Мой запрос Apollo правильно отображает маркеры в зависимости от найденных миссий в базе данных, единственная проблема, с которой я сталкиваюсь, это то, что onClick возвращает TypeError: _this.handleMissionClick is not a function. Я думаю, это потому, что функция находится за пределами части рендера и основного класса и не может найти способ связать две части.

Вот полный код страницы:

// @flow
import React from 'react'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
import { connect } from 'react-redux'
import Layer from 'grommet/components/Layer'
import MissionDetails from './../missions/details'

type TMission = {
  id : string,
  description: string,
  status: string,
  title: string,
  location: number[]
}

type TMissionProps = {
  data: {
    loading: boolean,
    searchMissions?: Array<TMission>
  }
}

function setIcon (status) {
  switch(status) {
    case 'accepted':
      return 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    case 'created':
      return 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
    default:
      return null;
  }
}

const _MissionList = (props: TMissionProps) => {
  if (!props.data.searchMissions) return null
  return (
        props.data.searchMissions &&
        props.data.searchMissions.map( mission => (
            <Marker
                    position={{ lng: mission.location[0], lat: mission.location[1]}}
                    key={ mission.id }
                    title={ mission.title }
                    icon={setIcon(mission.status)}
                    onClick={() => this.handleMissionClick(mission.id)}
            >
            </Marker>
        ))
  )
}

const MissionList = connect(
  ({ session }) => ({ t: 1 })
)(graphql(gql`
    query mapMissions(
      $authToken: String!
    ) {
    searchMissions(
      input: {
        location: [2, 3]
      }
    ) {
      id
      title
      status
    }
  }
`, {
  options: {
    fetchPolicy: 'network-only'
  }
})(_MissionList))

const GoogleMapWrapper = withScriptjs(withGoogleMap((props) =>
    <GoogleMap
      defaultZoom={11}
      defaultCenter={{ lat: 48.8588377, lng: 2.2770201 }}
      center={props.center}
    >
      <MissionList/>
    </GoogleMap>))

export default  class DashboardPage extends React.Component {
  constructor () {
    super();
    this.state = {
      localised: {
        lat: 48.8588377,
        lng: 2.2770201,
        selectedMissionId: null,
        showMissionDetailsLayer: false
      }
    };
  }

  toggleMissionDetailsLayer = () => {
    this.setState({
      showMissionDetailsLayer: !this.state.showMissionDetailsLayer
    })
  }

  componentDidMount () {
    this.getLocation();
  }

  handleMissionClick = (missionId: string) => {
    this.setState({
      selectedMissionId: missionId
    })
    this.toggleMissionDetailsLayer()
  }

  getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.setState({
          localised: {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          }}
        )
      })
    }
  }

  render () {
    return (
      <div>
        <div style={{ height: '20vh', width: '100%' }}>

        </div>

          <GoogleMapWrapper isMarkerShown
                            googleMapURL="https://maps.googleapis.com/maps/api/js?key=$$$&?v=3.exp&libraries=geometry,drawing,places"
                            loadingElement={<div style={{ height: `100%` }} />}
                            containerElement={<div style={{ height: `400px` }} />}
                            mapElement={<div style={{ height: `80vh` }} />}
                            center={{ lat : this.state.localised.lat, lng : this.state.localised.lng }}

          />
        {
          this.state.showMissionDetailsLayer &&
          <Layer align='right' closer={true} overlayClose={true} onClose={this.toggleMissionDetailsLayer}>
            <MissionDetails mission={_(this.props.data.allMissions).find({id: this.state.selectedMissionId})} />
          </Layer>
        }
      </div>
    )
  }
}

Answer 1

Поскольку ваш handleMissionClick определен в DashboardPage. Который является одним из родителей MissionList, вам нужно передать обработчик обратного вызова через реквизит. Таким образом, MissionList имеет опору для обработки onClick

На странице Dashboard вы должны передать onClickHandler

<GoogleMapWrapper 
  isMarkerShown
  googleMapURL="https://maps.googleapis.com/maps/api/js?key=$$$&?v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `80vh` }} />}
  center={{ lat : this.state.localised.lat, lng : this.state.localised.lng }}
  handleMissionClick={this.handleMissionClick} // Add callback prop here
/>

Внутри вашего GoogleMapWrapper передать дескрипторMissionClick prop в MissionList

const GoogleMapWrapper = withScriptjs(withGoogleMap((props) =>
<GoogleMap
  defaultZoom={11}
  defaultCenter={{ lat: 48.8588377, lng: 2.2770201 }}
  center={props.center}
>
  <MissionList handleMissionClick={props.handleMissionClick} />
</GoogleMap>))

В вашем MissionProps у вас есть onClick в качестве опоры

type TMissionProps = {
  data: {
    loading: boolean,
    searchMissions?: Array<TMission>
  },
  onClick: string => void
} 

Обновите свой маркер, чтобы использовать опору обратного вызова

 <Marker
   position={{ lng: mission.location[0], lat: mission.location[1]}}
   key={ mission.id }
   title={ mission.title }
   icon={setIcon(mission.status)}
   onClick={() => props.handleMissionClick(mission.id)} // Notice this is now props.handleMissionClick instead of this.handleMissionClick
 >
 </Marker>