Question

我正在使用react-redux来更新状态值。在我的代码中我使用谷歌地图组件，我想显示从地理编码器中检索到的位置名称＆＃39; infowindow＆＃39;谷歌地图。

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

在上面的代码中，除了在谷歌地图组件的infowindow里面显示locname之外，一切都很完美。经过大量的搜索，我了解到改变locname的唯一方法是将它存储在一个状态中。我正在使用反应-redux来改变状态值。当我连接＆＃39; demoApp＆＃39;使用redux存储的组件我只能在其中调度动作，MyMapComponent只接受来自它的父级的道具值。当MyMapComponent中的地理编码器收到locname的值时，我如何在内部调度动作？另一个解决方案是将此MyMapComponent写入一个单独的文件，以便我可以连接到store.But当我将MyMapComponent写入一个单独的文件并将其导入上面的代码时，它显示以下错误

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

无法更改reactjs

0 个答案: