要在谷歌地图上移动的标记会创建两对.一个移动，一个卡在初始位置

Question

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

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

我已经编写了我的 Map 组件，以每秒从 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;

编辑：这是它在初始加载时的样子： 初始负载

这是 API 开始获取数据时的样子： 初始加载后几秒钟

几分钟过去了，这就是它的样子： 初始加载后一两分钟

如您所见，首次加载的初始标记并未消失。我真的不明白为什么。我已经寻找资源来删除它，但找不到任何：/

第二个标记按照我想要的那样移动得很好。

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

Answer 1

解决了： 不得不从索引中删除围绕应用程序的 React.StrictMode.js。

现在它:)工作