reactjs - reactjs の状態値を変更できませんでした

Question

状態値を更新するためにreact-reduxを使用しています.コードではGoogleマップコンポーネントを使用しており、ジオコーダーから取得した場所の名前をGoogleマップの「情報ウィンドウ」に表示したいと考えています。

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';

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 =>
            <GoogleMap
                zoom={this.props.selectedMap.zoom}
                center={{lat:this.props.selectedMap.lat, lng:this.props.selectedMap.lng}}
            >
             <Marker
          position={{lat:this.props.selectedMap.lat, lng:this.props.selectedMap.lng }} >
          <InfoWindow>
            <p>{locName}</p>

          </InfoWindow>
          </Marker>
            </GoogleMap>
        );

        return(
            <MyMapComponent  newMap={this.props.selectedMap} />
        );
    }
}
const mapStateProps=(state)=> {
    return {
        selectedMap:state.mapReducer
    }
}

export default connect(mapStateProps)(DemoApp);

上記のコードでは、Google マップ コンポーネントの情報ウィンドウ内の locname の表示を除いて、すべてが完全に機能します。多くの検索の後、locname を変更する唯一の方法は、それを状態に保存することであることがわかりました。状態値を変更します。'demoApp' コンポーネントを redux ストアに接続すると、その内部でのみアクションをディスパッチできます。MyMapComponent は、その親からの props 値のみを受け入れます。 locname ?もう1つの解決策は、このMyMapComponentを別のファイルに書き込んで、ストアに接続できるようにすることです.しかし、MyMapComponentを別のファイルに書き込んで上記のコードにインポートすると、次のエラーが表示されます

Functions are not valid as a React child. This may happen if you return a Component instead of from render