React отображает те же карты Google после изменения состояний

Question

Я работаю над небольшим реактивным проектом, поэтому при рендеринге карт города с помощью карт Google обновляется другая информация, но карта остается прежней. На следующем изображении показана проблема:

На изображении выше первым исследованием был Чикаго, а следующим был Хьюстон, но даже когда я добавляю города, отображается только карта первого города. Вот исходный код моего компонента GoogleMap:

import React,{ Component } from 'react';

export default class GoogleMap extends Component{
    componentDidMount(){
        new google.maps.Map(this.refs.map,{
            zoom:12,
            center:{
                lat:this.props.lat,
                lng:this.props.lon
            }
        });
    }

    render(){
        return <div ref="map" />
    }   
}

И код этого родительского компонента:

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../components/Chart';
import GoogleMap from '../components/GoogleMap';

class WeatherList extends Component{
    citiesList(){
        return this.props.weather.map(w=>{
            //On va faire des conversions vers le celsius
            const temps=w.list.map(w=>w.main.temp-273.15);
            const pressure=w.list.map(w=>w.main.pressure);
            const humidity=w.list.map(w=>w.main.humidity);

            const { lon,lat }=w.city.coord
            return (
                 <tr>
                    <td><GoogleMap name={ w.city.name } lon={ lon } lat={ lat }  /></td>
                    <td>
                      <Chart moyenne={ "Temp moyenne : " } unite={" ᵒC"} color={"orange"} data={ temps } />
                    </td>
                    <td>
                      <Chart moyenne={ "Pression moyenne : " } unite={" hPa"} color={"green"} data={ pressure } />
                    </td>
                    <td>
                      <Chart moyenne={ "Humidité moyenne : " } unite={" %"} color={"black"} data={ humidity } />
                    </td>
                 </tr>   
            )
        })
    }
    render(){
        return (
           <table className='table table-hover'>
                <thead>
                    <tr>
                        <th>City</th>
                        <th>Temperature</th>
                        <th>Pressure</th>
                        <th>Humidity</th>
                    </tr>
                </thead>
                <tbody>
                    { this.citiesList() }
                </tbody>
           </table>
        )
    }
}


function mapStateToProps(state){
    return {
        weather:state.weather
    }
}

export default connect(mapStateToProps)(WeatherList);

Answer 1

Он не обновляется, поскольку объект google.maps.Map создается во время componentDidMount, а компонент GoogleMap будет по-прежнему монтироваться, пока вы только меняете значение реквизита (и состояния). Поэтому, может быть, лучше сделать что-то вроде этого:

import React,{ Component } from 'react';

export default class GoogleMap extends Component{
    constructor(props) {
        super(props);
        this.state = {
            lat: props.lat,
            lon: props.lon
        };
    }

    componentDidUpdate(prevProps){
        if (this.props.lat !== prevProps.lat && this.props.lon !== prevProps.lon){
            new google.maps.Map(this.refs.map,{
                zoom:12,
                center:{
                    lat:this.props.lat,
                    lng:this.props.lon
                }
            });
        }
    }

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

    render(){
        return <div ref="map" />
    }   
}