打算在 google 地图上移动的标记会创建两对。一个移动，一个卡在初始位置

Question

我一直在尝试在 React 中实现一个 Web 应用程序，该应用程序在地图上显示所有空中飞机。为此，我将 React-Google-Maps 与 Opensky Network API.

一起使用

我的问题很奇怪。当应用程序首次加载并且所有标记都已定位时，它看起来很好。但是当标记开始移动时，初始标记（应该移动的标记）仍然存在，而标记的新副本正在从初始位置移动。因此（在标记移动之后）我在地图上为每架飞机设置了 2 组标记。一个用于初始负载（即不动），一个用于移动。

我已将我的地图组件编码为每秒从 API 获取数据并在获取完成后更新状态。

知道为什么当状态更新时第一个加载的标记没有被删除吗？

import React, { useState, useEffect } from 'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from 'react-google-maps';
//import * as aircrafts from '../../data/aircrafts.json'; 

function Map() {
  const [selectedAirplane, setSelectedAirplane] = useState(null);
  // Set state (locations of airplanes) to initial request as markers
  const [airplanes, setAirplanes] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      // Update state (markers) every second
      fetch('https://opensky-network.org/api/states/all', { method: "GET" })
      .then(res => res.json())
      .then(response => {
        setAirplanes(response["states"]);
        //console.log(response["states"])
      });

    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
    <GoogleMap 
        defaultZoom={10}
        defaultCenter={{ lat:  57.041401, lng: 12.401050 }}
    >
    { airplanes.map((airplane) => ( 
       <Marker 
          key={airplane[0]}
          position={{ 
            lat: airplane[6],
            lng: airplane[5] 
          }}
          onClick={() => {
            setSelectedAirplane(airplane);
          }}
       />
    ))}

    {selectedAirplane && (
      <InfoWindow
        position={{ 
          lat: selectedAirplane[6],
          lng: selectedAirplane[5] 
         }}
         onCloseClick={() => {
          setSelectedAirplane(null);
         }}
      >
        <div>Airplane Details</div>
      </InfoWindow>
    )}
    </GoogleMap>
    </div>
  );
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default WrappedMap;

编辑： 这是初始加载时的样子： Initial load

这是 API 开始获取数据时的样子： Some seconds after initial load

这是几分钟过去后的样子： Minute or two after initial load

如您所见，首先加载的初始标记并没有消失。我真的不明白为什么。我一直在寻找资源来删除它，但找不到任何资源：/

第二个标记移动得很好，正如我所希望的那样。

非常感谢这里的任何提示，因为我无处可去:( 我已将我的项目上传到 Github，它位于此处：https://github.com/emilwallgren/Flight-Tracker

Answer 1

已解决：必须从 index.js.

中删除 App 周围的 React.StrictMode

现在可以了:)

打算在 google 地图上移动的标记会创建两对。一个移动，一个卡在初始位置

Markers which are meant to move on google map creates two pairs. One that moves and one that is stuck on initial position

javascript

reactjs

google-maps

react-hooks

react-google-maps