javascript - 为什么 Google map 不重新加载新坐标和列表的其余部分详细信息？

Question

我有一个事件列表，每个事件都有一个显示该事件详细信息的点击功能。每个细节都包含一个谷歌地图，该 map 采用在单击事件对象内找到的经纬度坐标。

我的问题是:当我第一次点击某个事件时，详细信息会正确显示，包括正确的标题、位置名称和 map 。但是，第二次单击会使用正确的标题和位置名称呈现新事件的新详细信息，但 map 不会更改。

为什么没有使用新坐标重新加载 map ？

这里是“事件列表”容器的代码:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { selectEvent } from '../actions/index.js';

class EventsList extends React.Component {
    render() {
        var createEventsList = this.props.events.map((event, i) => {
            return <li key={i} onClick={() => this.props.selectEvent(event)}>{event.title}</li>
        });
        return(
            <ul>{createEventsList}</ul>    
        );
    }
}

function mapStateToProps(state) {
    return {
        events: state.events
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ selectEvent: selectEvent }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(EventsList);

“事件详细信息”容器的代码:

import React from 'react';
import { connect } from 'react-redux';
import GoogleMap from '../components/google_map.js';

class EventDetail extends React.Component{
    render() {
        if(!this.props.event) {
            return <div>Pick an Event</div>
        }
        const latcoord = parseFloat(this.props.event.locationLat);
        const longcoord = parseFloat(this.props.event.locationLong);


        return(
            <div>
                <div>details for:</div>
                <div>{ this.props.event.title }</div>
                <div>{ this.props.event.location }</div>
                <GoogleMap long={longcoord} lat={latcoord}/>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        event: state.eventDetail
    };
}

export default connect(mapStateToProps)(EventDetail);

这是 Google map 组件的代码:

import React from 'react';

export default class GoogleMap extends React.Component{
    componentDidMount() {
        new google.maps.Map(this.refs.map, {
            zoom: 15, 
            center: {
                lat: this.props.lat,
                lng: this.props.long
            }
        });
    }
    render() {
        return(
            <div className="google-map" ref="map"></div>
        );
    }
}

Answer 1

因为 componentDidMount 在组件被挂载时只被调用一次，所以当你第二次点击一个事件时， map 不会得到更新。要更正此问题，您需要实现 componentDidUpdate() 函数。您还应该将 map 保存在某个状态或此上下文中。您不会希望总是创建新 map 。

componentDidMount() {
        this.map = new google.maps.Map(this.refs.map, {
            zoom: 15, 
            center: {
                lat: this.props.lat,
                lng: this.props.long
            }
        });
}

componentDidUpdate() {
       this.map.panTo(new google.maps.LatLng(this.props.lat, this.props.lng));
}

希望对您有所帮助。 :)