如何使用react和react-map-gl在mapbox-gl-js中实时更新功能 ./ temp-data 查看输出结果

如何解决如何使用react和react-map-gl在mapbox-gl-js中实时更新功能 ./ temp-data 查看输出结果

我想为我们的无人机创建动态路径。假设我有一架必须从点1到点100的无人机。它们之间可能有多个点。最初，无人机并未访问所有点，因此其路径颜色将变为红色，如下所示。

所有访问点都将具有绿色路径，如下所示。

我有两个状态变量“ beforeMarker”和“ afterMarker”。两者都是对象，它们的结构相同。

export const beforeRoute={
    id:"data__id__route__id",type: "Feature",properties: {
        id:"route__num"
    },geometry: {
      type: "Linestring",coordinates: [
        [76.994168,31.780632]
      ]
    }
}

boforeMarker 最初将包含与上述相同的数据。 afterMarker 具有相同的结构，但是包含的坐标点比 beforeMarker 多。我有一个函数，它将在每个时间间隔更新状态变量，直到 afterMarker 的坐标数组变为空。

import React,{useState,useEffect} from "react";
import * as data from "./temp-data";
import {Source,Layer} from "react-map-gl";
const DynamicRoute=()=>{
    const [beforeMarker,setBeforeMarker] = useState(data.beforeRoute);
    const [afterMarker,setAfterMarker] = useState(data.route);

    const shiftPosition=()=>{
        let tempData = beforeMarker;

        // push the current index in beforeMarker indecating that it has been travelled
        tempData.geometry.coordinates.push(afterMarker.geometry.coordinates[0]);
        setBeforeMarker(tempData);

        //remove first index from afterMarker because it has been travelled.
        tempData = afterMarker;
        tempData.geometry.coordinates.shift();
        setAfterMarker(tempData);
        
        if(afterMarker.geometry.coordinates.length>0)
            setTimeout(shiftPosition,1000)
    }

    useEffect(() => {
        shiftPosition();
        return () => {
            // clear the time out
        }
    },[])
    return <>
    <Source type="geojson" data={beforeMarker}>
        <Layer {...data.getLayer(false,"route__2","green",true)}/>
    </Source>
    <Source type="geojson" data={afterMarker}>
        <Layer {...data.getLayer(false,"route__3","red",true)}/>
    </Source>
    </>
}
export default DynamicRoute;

./ temp-data

export const getLayer=(hovered,id,color,activeRoute)=>{
    const layer = {
        'id': id,'type': 'line','source': 'route','layout': {
            'line-join': 'round','line-cap': 'round'
        },'paint': {
            'line-color': color,'line-width': 15,// 'line-dasharray':[1,2,3],'line-opacity':activeRoute==true?1:0.5
        }
      }

      return layer
}
export const beforeRoute={
    id:"data__id__route__2",properties: {
        id:"route2"
    },31.780632]
      ]
    }
  } 
  
export const route={
  id:"data__id__route__1",properties: {
      id:"route1"
  },geometry: {
    type: "Linestring",coordinates: [
      [76.993894,31.781929],[76.997771,31.783204 ],[ 77.005974,31.782787],[ 77.007503,31.786132],[ 77.009612,31.788978],[ 77.012691,31.794107],[ 77.017183,31.796991],[ 77.020515,31.797196],[ 77.032804,31.794456 ],[ 77.050037,31.794735],[ 77.052444,31.791744],[ 77.053965,31.792045]
    ]
  }
} 

我没有得到预期的输出。就像这个问题的第二张图片。

数据 beforeMarker 和 afterMarrker 正在更新，但路径未更新。

查看输出结果

如果我将setTimeout(shiftPosition,1000)更改为setTimeout(shiftPosition,1)，则得到此结果。

如果我将其更改为shiftPosition()，则整个路径将变为绿色。

因此，如果状态变量正在更新，则依赖组件也应更新。从上面的图像中我们可以看到，组件在某些时间正在更新。为什么会这样。