ReactJS 和谷歌地图 - 显示标记

Question

我是 React 新手，所以可能会问一个愚蠢的问题，但这让我感到困惑。作为我学习的一部分，我正在构建一个三组件应用程序 - 一个父级About和两个子级（GoogleMap和MapMarkerDetails）。父母进行数据协调，一个孩子默认显示带有两个标记的谷歌地图，另一个孩子在单击时显示标记的详细信息。我现在正在添加功能以在单击地图时添加新标记。大多数功能都有效 - 绘制地图，添加默认标记，当单击其中一个标记时，这会调用父类上的一个函数，该函数会更新其状态并将其传播到MapMarkerDetails元素，并且一条简单的消息是显示。这是我评论以帮助理解的父类：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 GoogleMapHowever, 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;这是显示 Google Map 和标记的类：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')

Answer 1

就像您componentDidMount在第一次加载地图时强制添加标记一样，您应该componentDidUpdate在道具更改时使用它来执行相同的操作。在您的 GoogleMap 组件中：

componentDidUpdate() {

  this.placeMMarkers()

}

googleMap我不会将其作为参数传递，而是将其设置为实例变量componentDidMount：

this.googleMap = new window.google.maps.Map(...

然后将 placeMMarkers 更改为使用this.googleMap：

placeMMarkers = () => {

  this.props.markers.forEach((m) => {

    m.map = this.googleMap;

    // ...

由于您在 中附加了一个事件处理程序placeMMarkers，您还应该添加一些逻辑来区分新标记和现有标记，以避免将多个事件处理程序添加到现有标记。

针对您关于如何最好地设置状态的问题，我认为您所拥有的很好，但您不需要将新标记放在数组中：

let newMarker = {

    position: { lat: latlng.lat(), lng: latlng.lng() },

    label: 'New',

    map: null,

};

let markers = [...this.state.markers, newMarker]