如果数据更改，则源和图层组件不显示

如何解决如果数据更改，则源和图层组件不显示

我正在尝试使用 react-map-gl 构建 GPS 跟踪器，并希望使用从 where-is-iss-API 检索到的数据绘制一条线。如果源 JSON 中的坐标是静态初始化的，则会显示该行。

   const [geojson,setGeojson]: any = useState(
            {
                type: "Feature",geometry: {
                    type: "Linestring",coordinates: [
                        [-77.0323,38.9131],[-80.0323,40.9131]
                    ]
                },properties: {
                    "name": "Route"
                }
            });

但是当通过 useEffect 添加数据时它不会显示

const [data,setData]: any = useState(dataProp);

const updateLayer = () => {
        console.log(data)
        if (data.latitude !== undefined && data.longitude !== undefined) {
            setGeojson({
                ...geojson,geometry: {
                    coordinates: [
                        ...geojson.geometry.coordinates,[data.longitude,data.latitude]
                    ]
                }
            })
        }
        console.log(geojson);
    }

    useEffect(() => {
        setData(dataProp);
        if(data !== undefined && data !== null){
            updateLayer();
        }
    },[dataProp]);

在这种情况下，该行仅显示前两个坐标。

const route: LayerProps = {
    id: 'route',type: 'line',source: 'geojson',paint: { 'line-color': 'red',"line-width": 4 }
};
return (
        <div>
            <ReactMapGL
                {...viewport}
                mapBoxApiAccesstoken={token}
                mapStyle={"mapBox://styles/gobsej/ckomzwjdg377w18ozdhm1by36"}
                width="100vw"
                height="100vh"
                onViewportChange={(viewport: React.SetStateAction<{ latitude: number; longitude: number; zoom: number; }>) => setViewport(viewport)}
            >
            <Source id="my-data" type="geojson" data={geojson}>
                    <Layer {...route} />
            </Source>

            </ReactMapGL>
        </div >
    );

使用 axios 获取数据并作为 prop 提供给组件

const getGPSLocation = async () => {
        await Axios.get('https://api.wheretheiss.at/v1/satellites/25544').then((response) => {
            console.log(response.data);

            setData(response.data);
        }).catch((error) => {
            console.log(error);
        });

    };
    useEffect(() => {
        getGPSLocation();
        const interval = setInterval(getGPSLocation,1000)

        return () => { 
            clearInterval(interval); }
    },[]);
    
    return (
        <div>
            <Map dataProp={data}></Map>
        </div>
    );

控制台输出如下： https://i.stack.imgur.com/oZIlb.png