I'm React newbie so maybe asking a stupid question, but this has got me perplexed. As part of my learning I'm building a three component application - a parent About
, and two children (GoogleMap
and MapMarkerDetails
). The parent does the data coordination and one child shows a google map with two markers as default, the other child shows details of the markers when it is clicked.
I am now adding functionality to add a new marker when the map is clicked. Most of the functionality works - the maps is draw, the default markers are added, and when one of the markers is clicked, this calls a function on the parent class which updates its state and this is propagated to the MapMarkerDetails
element and a simple message is displayed.
Here is the parent class which I have commented to help understanding:
import React, { Component } from 'react';
import GoogleMap from './GoogleMap'
import MapMarkerDetails from './MapMarkerDetails'
class About extends Component {
state = {
markers: [{
position: { lat: 51.438759, lng: -2.864514 },
label: 'A',
map: null,
}, {
position: { lat: 51.433636, lng: -2.868734 },
label: 'B',
map: null,
}],
greeting: 'HelloA'
}
showMarkerInfo = (label) => {
this.setState({greeting: ('Hello ' + label)})
}
/*
Adding a new Marker
This function is called from the child element GoogleMap
However, the setState(...) dosn't seem to propogate down to the GoogleMap element.
*/
addMarker = (latlng) => {
let newMarker = [{
position: { lat: latlng.lat(), lng: latlng.lng() },
label: 'New',
map: null,
}];
/* Creates a new array for updating state. Is this the best way to do this */
let markers = [...this.state.markers, ...newMarker]
this.setState({markers});
console.log(this.state) // This shows the added marker
}
render() {
return (
<div className="container">
<h4 className="center">About</h4>
<MapMarkerDetails details={this.state.greeting}/>
<GoogleMap markers={this.state.markers} clickedMarker={this.showMarkerInfo} addMarker={this.addMarker}/>
</div>
)
}
}
export default About;
Here is the class that displays Google Map and the markers:
import React, { Component } from 'react';
class GoogleMap extends Component {
constructor(props) {
super(props);
this.googleMapRef = React.createRef(); // Create a referance for Google Map to draw to
console.log('Constructore')
}
componentDidMount(){
console.log('componentDidMount')
/* Create the Map */
let googleMap = new window.google.maps.Map(this.googleMapRef.current, {
zoom: 15,
center: {
lat: 51.436411,
lng: -2.861980,
},
disableDefaultUI: true,
})
this.placeMMarkers(googleMap) // Place the markers
this.addMapListner(googleMap) // Define a click listener to place new markers
}
/* Place the markers */
placeMMarkers = (googleMap) => {
this.props.markers.forEach((m) => {
m.map = googleMap;
let marker= new window.google.maps.Marker(m)
marker.addListener('click', () => { this.props.clickedMarker(m.label); });
}
);
}
/* Map listeners */
addMapListner = (googleMap) => {
googleMap.addListener('click', (e) => {
this.props.addMarker(e.latLng)
})
}
render() {
console.log('render: ' + this.props.markers) // This is showing the added markers
return (
<div
id="google-map"
ref={this.googleMapRef}
style={{ width: '800px', height: '400px', float: 'left' }}>
</div>
)
}
}
export default GoogleMap
I've added console logging to each function so I can follow what is happening.
Here is the MapMarkerDetails
which displays a simple message when an marker is clicked. This all works fine.
import React, { Component } from 'react';
class MapMarkerDetails extends Component {
render(){
return (
<div style={{width: '100px', height: '400px', backgroundColor: 'gray', float: 'left'}}>
{this.props.details}
</div>
)
}
}
export default MapMarkerDetails
Description of the Problem
When the user clicks on the map (not a marker) this invokes the function addMarker
which is passed down from the parent About
class (snippet below). In the addMarker
function of About
the lat/lng is passed in. This represents where the user clicked. This is converted into a marker
data object, then a new array is created which contains the default markers and the new one. I'm not sure if my new array creation is done in the best way - if not let me know.
Once the new array is created, we update the components state with this.setState({markers})
. I thought this would lead to a re-render()
and an redrawing of the map with the added marker. But not.
addMarker = (latlng) => {
let newMarker = [{
position: { lat: latlng.lat(), lng: latlng.lng() },
label: 'New',
map: null,
}];
/* Creates a new array for updating state. Is this the best way to do this */
let markers = [...this.state.markers, ...newMarker]
this.setState({markers});
console.log(this.state) // This shows the added marker
}
Something happens that results in the render()
function of GoogleMap
being called, but only the original markers are shown. The data is passed down to the GoogleMap
component because I can see the output of console.log('render: ' + this.props.markers)
. But how do I get ALL the markers to load?
Please advise on what is the best way to for About
to pass data to GoogleMap
such that it can add in the new marker.
Just like you use componentDidMount
to imperatively add the markers when the map is first loaded, you should use componentDidUpdate
to do the same thing when the props change. In your GoogleMap component:
componentDidUpdate() {
this.placeMMarkers()
}
Rather than passing googleMap
as an argument, I would set it as an instance variable in componentDidMount
:
this.googleMap = new window.google.maps.Map(...
and then change placeMMarkers to use this.googleMap
:
placeMMarkers = () => {
this.props.markers.forEach((m) => {
m.map = this.googleMap;
// ...
Since you are attaching an event handler in placeMMarkers
, you should also add some logic to distinguish between new markers and existing ones, to avoid adding multiple event handlers to existing markers.
In response to your question about how best to set the state, I think what you've got is fine but you don't need to put the new marker inside an array:
let newMarker = {
position: { lat: latlng.lat(), lng: latlng.lng() },
label: 'New',
map: null,
};
let markers = [...this.state.markers, newMarker]
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加