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

我一直在尝试在React中实现一个web应用程序，它在地图上显示所有的机场飞机。 为此，我使用了React谷歌地图和Opensky网络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;

import React，{useState，useffect}来自“React”；
从“react GoogleMaps”导入{GoogleMap，withScriptjs，withGoogleMap，Marker，InfoWindow}；
//从“../../data/aircrafts.json”导入*作为飞机；
函数映射（）{
const[selectedAirplane，setSelectedAirplane]=使用状态（null）；
//将状态（飞机位置）设置为初始请求作为标记
const[airplanes，setAirplanes]=useState（[]）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
//每秒更新一次状态（标记）
取（'https://opensky-network.org/api/states/all“，{method:“GET”}）
.then（res=>res.json（））
。然后（响应=>{
设置飞机（应答[“状态]）；
//console.log（响应[“状态”]）
});
}, 1000);
return（）=>clearInterval（interval）；
}, []);
返回(
{飞机.地图（（飞机）=>（
{
设置选定的飞机（飞机）；
}}
/>
))}
{选定的飞机&&(
{
设置选定的飞机（空）；
}}
>
飞机详情
)}
);
}
const WrappedMap=withScriptjs（withGoogleMap（Map））；
导出默认WrappedMap；

编辑： 这是初始加载时的外观：

这就是API开始获取数据时的样子：

这就是几分钟过去后的样子：

如您所见，第一次加载的初始标记并没有消失。我真的不明白为什么。我已查找资源以删除此项，但找不到任何：/

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

这里的任何提示都是非常感谢的，因为我一无所获：( 我已将我的项目上载到Github，它位于此处：

解决了它： 必须从index.js中删除应用程序周围的React.StrictMode

现在它起作用了：）