reactjs 'react-google-maps'尽管数组为空，但标记仍然显示

我在我的GoogleMapComponent.js中使用react-google-maps。该组件应基于名为similarLocations的 prop 呈现多个标记。在初始渲染时，阵列为空，并且贴图上不显示任何标记。在父组件内部，当用户输入任何字符时，都会触发一个获取请求，该请求会以传递给GoogleMapComponent的类似位置数组进行响应，并且标记会成功显示在Map上。
然而，当用户输入另一个字符导致空数组响应时，先前的标记继续显示在Map上，即使我已经确认 prop 正在用空数组传递。当数组为空时，如何删除标记？下面是父组件CreateLocation.js：

import React, { useEffect, useState } from 'react'
            import Input from '../../../components/input'
            import { checkLocationMatches} from '../api'
            import GoogleMapComponent from './GoogleMapComponent'

            const CreateLocation = ({
                isEdit,
            }) => {
                const [locationData, setLocationData] = useState({
                    id: null,
                    client: null,
                    locationName: '',
                    googleLocationDetails: '',
                    nameAr: '',
                    nameEn: '',
                    street: '',
                    description: '',
                    category: null,
                    clientCode: '',
                    tags: [],
                    lat: 0,
                    lang: 0,
                    gov: '',
                    city: '',
                    area: ''
                })
                const [similarLocations, setSimilarLocations] = useState([])

                const matchArabicName = async () => {
                    try {
                        const data = {
                            lat: locationData.lat,
                            lang: locationData.lang,
                            clientId: locationData.client.value,
                            matcher: 'name_ar',
                            name: locationData.nameAr
                        }
                        const response = await checkLocationMatches(data)
                        response.data ? setSimilarLocations(response.data) : setSimilarLocations([])
                    } catch (err) {
                        console.log(err.response, 'match err')
                    }
                }

                useEffect(() => {
                    if (locationData.lat !== 0 && locationData.nameAr.length > 0 && !isEdit) {
                        matchArabicName()
                    }
                    // eslint-disable-next-line react-hooks/exhaustive-deps
                }, [locationData.lat, locationData.nameAr])

                return (
                    <Container>
                        <Body>
                            <Form>
                                <Input
                                    disableWithBorder={false}
                                    label="Client Location Name (Arabic)"
                                    name="nameAr"
                                    placeholder="EX: Hyper one"
                                    type="text"
                                    value={locationData.nameAr}
                                    onChange={e => handleLocationDetailsChange(e)}
                                    required
                                    isEditable
                                />
                            </Form>

                            <MapContainer>
                                <GoogleMapComponent
                                    isMarkerShown
                                    containerElement={
                                        <div style={{ height: '100%', width: '100%' }} />
                                    }
                                    setMapLocationData={handleSetMapLocationData}
                                    lat={locationData.lat}
                                    lang={locationData.lang}
                                    isOpen={true}
                                    similarLocations={similarLocations}
                                />
                            </MapContainer>
                        </Body>

                    </Container>
                )
            }

            export default CreateLocation

GoogleMapComponent.js：

/* eslint-disable eqeqeq */
  import React, { useEffect, useState } from 'react';
  import { compose, withProps } from 'recompose';
  import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';
  import MapMarker from '../../../assets/icons/map-marker.svg'
  import SimilarMarkerIcon from '../../../assets/icons/similar-marker.svg'

  const GoogleMapComponent = compose(
    withProps({
      googleMapURL:
        'https://maps.googleapis.com/maps/api/js?key=API_KEY&region=EG&language=ar&v=3.exp&libraries=geometry,drawing,places',
      loadingElement: <div style={{ height: `100%` }} />,
      mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
  )(({
    isMarkerShown,
    multipleMarkers,
    similarLocations,
    readOnly
  }) => {

    useEffect(() => {
      console.log(similarLocations, 'Similar locations')
      console.log(similarLocations.length, 'Similar locations length')
    }, [similarLocations])

    const onMarkerDragEnd = (coord) => {
      const { latLng } = coord;
      const lat = latLng.lat();
      const lng = latLng.lng();
      setCurrentPosition({ lat: lat, lang: lng });
      getReverseGeocodingData(lat, lng);
    };

    return (
      <GoogleMap
        defaultZoom={zoom || 12}
        zoom={zoom || 12}
        center={{ lat: currentPosition.lat, lng: currentPosition.lang }}
        onClick={(e) => onMarkerDragEnd(e)}>

        {isMarkerShown && !multipleMarkers && (
          <Marker
            position={{ lat: currentPosition.lat, lng: currentPosition.lang }}
            defaultDraggable={!readOnly}
            onDragEnd={(e) => onMarkerDragEnd(e)}
            options={{
              icon: {
                url: MapMarker,
              },
            }}
          />
        )}
        {
          similarLocations.length > 0 &&
          similarLocations.map(marker => (
            <Marker
              key={marker.location.id}
              position={{ lat: +marker.location.latitude, lng: +marker.location.longitude }}
              onClick={() => {
                handleActiveMarker(marker.location.id)
              }}
              options={{
                icon: {
                  url: SimilarMarkerIcon,
                },
              }}
              visible={similarLocations.includes(marker)}
            >
              {activeMarker === marker.location.id ? (
                <InfoWindow onCloseClick={() => setActiveMarker(null)}>
                  <div>{marker.location.name_ar}</div>
                </InfoWindow>
              ) : null}
            </Marker>
          ))
        }
      </GoogleMap>
    );
  });

  export default GoogleMapComponent;

reactjs 'react-google-maps'尽管数组为空，但标记仍然显示

1条答案

相关问题

热门标签

最新问答