我遇到了问题，我的 GoogleMaps 实例会刷新，并且会自行以某些onClick功能为中心，在该功能上正在设置状态并且会发生整个组件渲染周期。

经过一些谷歌搜索后，建议将组件实例化分离并重新使用。现在的问题是我有一些逻辑可以在<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 经验，感谢任何帮助！