无法检索reactjs中render函数内定义的变量的值

Question

在我的代码中，我尝试使用geocode reducer从latitide和经度位置检索位置名称并尝试显示它。

这是我的代码

import React from 'react';
import { compose, withProps,withHandlers,lifecycle } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker,InfoWindow } from "react-google-maps"
import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';
import { connect } from 'react-redux';


export default class DemoApp extends React.Component {
    render() {
        var areaName,locName;
        const MyMapComponent = compose(
            withProps({
                googleMapURL: ('https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyAoaDS6fIKlYvEHeTaakCxXqp-UwnggoEg'),
                loadingElement: (<div style={{ height: '100%' }} />),
                containerElement: (<div style={{ height: '400px' }} />),
                mapElement: (<div style={{ height: '100%' }} />)
            }),
            withScriptjs,
            withGoogleMap,
            lifecycle({
                componentWillMount() {

                    let geocoder = new window.google.maps.Geocoder();
                    geocoder.geocode( { 'latLng': {lat:this.props.newMap.lat,lng:this.props.newMap.lng}}, function(results, status) {
                        if (status == 'OK') {
                            console.log('here result of geocoder', results);
                            if (results[0]) {
                                let adrs_comp = results[0].address_components;
                                for(let  i = 0; i < adrs_comp.length; i++) {
                                    if(adrs_comp[i].types[0] === "locality" ) {
                                        locName = adrs_comp[i].long_name;
                                        console.log("loc name");
                                        console.log(locName);
                                        console.log("loc name");
                                    }
                                    if(adrs_comp[i].types[0] === "administrative_area_level_1" ) {
                                        areaName = adrs_comp[i].long_name;
                                        console.log("area name");
                                        console.log(areaName);
                                        console.log("area name");
                                    }
                                }
                            }
                        } else {
                            console.log('Geocode was not successful for the following reason: ' + status);
                        }
                    });
                }
            })
        )(props =>{
            return (<GoogleMap
                zoom={this.props.myMap.zoom}
                center={{lat:this.props.myMap.lat, lng:this.props.myMap.lng}}
            >
             <Marker
          position={{lat:this.props.myMap.lat, lng:this.props.myMap.lng }} >
          <InfoWindow>
            <p>{locName}</p>
          </InfoWindow>
          </Marker>
            </GoogleMap>)
        }
        );

        return(
            <MyMapComponent newMap={this.props.myMap} />
        );
    }
}

在上面的代码中如何在谷歌地图的信息窗口中显示locname变量的值？。我认为这是因为谷歌地图组件只收到道具作为参数。如何解决这个问题？