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 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;

这是显示 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() {&nbsp; this.placeMMarkers()}googleMap我不会将其作为参数传递，而是将其设置为实例变量componentDidMount：this.googleMap = new window.google.maps.Map(...然后将 placeMMarkers 更改为使用this.googleMap：placeMMarkers = () => {&nbsp; this.props.markers.forEach((m) => {&nbsp; &nbsp; m.map = this.googleMap;&nbsp; &nbsp; // ...由于您在 中附加了一个事件处理程序placeMMarkers，您还应该添加一些逻辑来区分新标记和现有标记，以避免将多个事件处理程序添加到现有标记。针对您关于如何最好地设置状态的问题，我认为您所拥有的很好，但您不需要将新标记放在数组中：let newMarker = {&nbsp; &nbsp; position: { lat: latlng.lat(), lng: latlng.lng() },&nbsp; &nbsp; label: 'New',&nbsp; &nbsp; map: null,};let markers = [...this.state.markers, newMarker]