反应谷歌地图组件重新渲染问题

Question

我正在尝试在状态发生变化时重新渲染谷歌地图组件。我正在使用react-redux来改变状态。状态变化成功，但地图不会重新渲染。当我手动刷新浏览器时，只需要获取新的状态值。

map.js

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

    const MyMapComponent = compose(
      withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyAoaDS6fIKlYvEHeTaakCxXqp-UwnggoEg",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
      }),
       withHandlers({
        onMarkerClustererClick: () => (markerClusterer) => {
          const clickedMarkers = markerClusterer.getMarkers()
          console.log(`Current clicked markers length: ${clickedMarkers.length}`)
          console.log(clickedMarkers)
        },
      }),
      withScriptjs,
      withGoogleMap
    )((props) =>
      <GoogleMap
        defaultZoom={props.maps.zoom}
        defaultCenter={{ lat:props.maps.lat, lng:props.maps.lng }}
      >
       <MarkerClusterer
          onClick={props.onMarkerClustererClick}
          averageCenter
          enableRetinaIcons
          gridSize={60}
        >
          {props.markers.map(marker => (
            <Marker
              key={marker.photo_id}
              position={{ lat: marker.latitude, lng: marker.longitude }}
            />
          ))}
        </MarkerClusterer>
      </GoogleMap>
    );

    export default class DemoApp extends React.Component {
  componentWillMount() {
    this.setState({ markers: [] })
  }

  componentDidMount() {
        console.log("+mymap++++++++");
        console.log(this.props.myMap);
        this.setState({markers:[{photo_id:1,longitude:76.911270,latitude:11.032595},
                                {photo_id:2,longitude:75.806682,latitude:11.259169},
                                {photo_id:3,longitude:77.213780,latitude:28.617671},
                                {photo_id:4,longitude:78.138991,latitude:9.903245}]})
    }

  render() {
    return (
      <MyMapComponent markers={this.state.markers} maps={this.props.myMap} />
    )
  }
}

在上面的代码中，我给google map的defaultcenter属性赋予了动态值。

home.js

import React from 'react';
import ReactDom from 'react-dom';
import User from './users';
import * as ReactBootstrap from 'react-bootstrap';
import { connect } from 'react-redux';
import Card from './userdetails';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import MapIcon from 'material-ui/svg-icons/communication/location-on';
import './homeStyle.css';
import DemoApp from './maps';
class Home extends React.Component {
    viewProfile(e) {
        console.log(e);
        console.log("component in home");
        this.props.userSelected(e);
    }

    render() {
        const style = {
        paper: {
            display: 'inline-block',
            float: 'left',
            margin: '16px 32px 16px 0',
        }
    }
        return (
            <div style={{marginTop:68}}>
                <h1>welcome </h1>
                <ReactBootstrap.Col sm={12} >
                    <ReactBootstrap.Row>

                        <ReactBootstrap.Col sm={4}>
                            <ReactBootstrap.Col sm={12}>
                                <Paper style={style.paper}>
                                    <Menu onItemClick={(event,menuitem,index)=>{console.log(menuitem.props.value);this.props.myMap();}} value="map menu">
                                        <MenuItem value="maps"  primaryText="My Location" leftIcon={<MapIcon />} />
                                    </Menu>
                                </Paper>
                            </ReactBootstrap.Col>   
                            <ReactBootstrap.Col sm={12}>
                                <DemoApp myMap={this.props.selectedMap} />
                            </ReactBootstrap.Col>   
                        </ReactBootstrap.Col>

                        <ReactBootstrap.Col sm={4} style={{border:'1px solid black',paddingBottom:20,marginBottom:78,marginTop:10}}>
                            <User viewProfile={(e) => this.viewProfile(e)} />
                        </ReactBootstrap.Col>
                    {   this.props.selectedUser.id ?
                            <ReactBootstrap.Col sm={4} style={{border:'1px solid black',marginTop:10}}>
                                <Card details={this.props.selectedUser} />
                            </ReactBootstrap.Col>
                        : null  
                    }   
                    </ReactBootstrap.Row>
                </ReactBootstrap.Col>
            </div>  
        )
    }
}
const mapStateProps=(state)=> {
    console.log(state);
return {
    selectedUser:state.userdetails,
    selectedMap:state.mapReducer
}
}
const mapDispatchProps=(dispatch)=> {
    return {
        userSelected:(data)=> {
            dispatch({type:"USER_SELECTED",data});
        },
        myMap:()=>{
            dispatch({type:"MAPS"});
        }
    }
}
export default connect(mapStateProps,mapDispatchProps)(Home);

在上面的代码中（home.js）<DemoApp />是地图组件，状态属性通过props传递给它。当用户点击菜单项时，它会调度一个名为＆＃39; MAPS＆＃39;并且状态更改成功，但<DemoApp />组件不会使用其新值重新呈现。这是什么问题？