Блог

У меня возникали проблемы, когда мой экземпляр GoogleMaps обновлялся и самоцентрировался на некоторой onClick функции, в которой устанавливалось состояние, и выполнялся весь цикл рендеринга компонента.

После некоторого поиска в Google было предложено разделить и повторно использовать создание экземпляра компонента. Проблема сейчас в том, что у меня есть некоторая логика для отображения маркеров внутри <GoogleMaps> компонента, который больше не работает должным образом, и я не знаю, как провести рефакторинг:

 export default function LocationSearchResults({
    ...
    }) {
    const [map, setMap] = useState(null)
    const [markersContainer, setMarkersContainer] = useState([])

    const getMap = () => {

        if (map) {
            return map;
        } else {
            setMap(<GoogleMap mapContainerStyle={containerStyle}
                options={ {
                        minZoom: 3,
                        maxZoom: 15
                    }}
                center={{
                        lat: 49.25,
                        lng: -84.5
                    }}
                zoom={5}
                onLoad={onLoad}
                onDragEnd={onDragEnd} >
                {
                    markersContainer.map(place => { //Only executes once? Does not listen for changes
                        return (< Marker key={place.id}
                            position={ place.position}
                        />
                        )
                    })

                }

                </GoogleMap>

                )

                return map

            }
        }

        render( <div className="..." >
                    {
                     getMap()
                    } 
            </div>
        )
    }
  

У меня нет большого опыта работы с React, любая помощь приветствуется, спасибо!

Я настроил создание экземпляра моего компонента следующим образом, используя useMemo

 ...instantiate all event listener functions here

const map = useMemo(() =>
 {
   return (<GoogleMap
    mapContainerStyle={containerStyle}
    options={{ minZoom: 3, maxZoom: 15 }}
    center={{
      lat: 49.25,
      lng: -84.5
    }
    }
    zoom={5}
    onLoad={onLoad}
    onDragEnd={onDragEnd}
  // onUnmount={onUnmount}
  >
     {markersContainer.map(place => { return ( <Marker
                    key={place.id}
                    position={place.position} />
                    )
                   })
    }
 </GoogleMap>)

}, [markersContainer])
  

затем я просто выполняю рендеринг в своей функции render ():

 return (
    <>
<div>...
  {map}
</div>
</>)
  

Больше никаких ненужных обновлений, если новые маркеры не будут добавлены / удалены.