1

我正在使用 react-redux 更新状态值。在我的代码中，我使用的是谷歌地图组件，我想在谷歌地图的“信息窗口”中显示从地理编码器检索到的位置名称。

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 的唯一方法是将其存储在一个状态中。我正在使用 react-redux更改状态值。当我将“demoApp”组件与 redux 存储连接时，我只能在其中调度动作，MyMapComponent 将只接受来自其父级的道具值。当 MyMapComponent 中的地理编码器接收到值时，如何在内部调度动作locname？另一种解决方案是将此 MyMapComponent 写入一个单独的文件，以便我可以与商店连接。但是当我将 MyMapComponent 写入一个单独的文件并将其导入到上面的代码中时，它显示以下错误

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

0 回答 0