Reactjs 使用React JS在一张地图中显示多条起点和终点路线？

我试图显示不同的起始点和目的地，但它只显示一个。在这段代码中，起始点和目的地在数组中，并动态循环一个数组，它只需要一个索引信息

render(){  
let DirectionsComponent;
    if(this.state.trackData.length>0){
      debugger
        console.log(this.state.trackData)
        const da = this.state.trackData
            DirectionsComponent = compose(
                withProps({
                    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=",
                    loadingElement: <div style={{ height: `400px` }} />,
                    containerElement: <div style={{ width: `100%` }} />,
                    mapElement: <div style={{height: `600px`, width: `600px` }}  />,
                }),
                withScriptjs,
                withGoogleMap,
                lifecycle({
                    componentDidMount(){
                      debugger
                      console.log(da.length)
                        for(let i=0;i<da.length;i++){
                            const waypoints = da[i].map(p=>({
                                location: {lat: parseFloat(p.PositionLat), lng:parseFloat(p.PositionLong)},
                                stopover: true
                            }))
                            const origin = waypoints.shift().location
                            const destination = waypoints.pop().location
                            const DirectionsService = new window.google.maps.DirectionsService();
                            DirectionsService.route({
                                origin: origin,
                                destination: destination,
                                travelMode: window.google.maps.TravelMode.DRIVING,
                                waypoints: waypoints
                            },(result, status) =>{
                                if (status === window.google.maps.DirectionsStatus.OK){
                                    this.setState({
                                        directions: {...result},
                                        markers: true,
                                    })
                                }else{
                                    console.error(`error fetching directions ${result}`);
                                }
                            });
                        }
                    }
                })
            )(props=>
            <GoogleMap defaultZoom={20} >{props.directions && <DirectionsRenderer directions={props.directions}
            // suppressMarkers={props.markers}
            />
                }
            </GoogleMap>);
    }

render（）{
让方向组件；
if（this.state.trackData.length>0）{
调试器
console.log（this.state.trackData）
const da=this.state.trackData
方向组件=组合(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key=",
加载元素：，
集装箱运输：，
mapElement:，
}),
用ScriptJS，
用谷歌地图，
生命周期({
componentDidMount（）{
调试器
控制台日志（数据长度）
for（设i=0；i({
位置：{lat:parseFloat（p.PositionLat），lng:parseFloat（p.PositionLong）}，
中途停留：对
}))
常量原点=航路点.shift（）.位置
const destination=waypoints.pop（）.location
const DirectionsService=new window.google.maps.DirectionsService（）；
方向服务.路线({
来源:来源,，
目的地：目的地，
travelMode:window.google.maps.travelMode.DRIVING，
航路点：航路点
}，（结果、状态）=>{
if（status==window.google.maps.directionstatus.OK）{
这是我的国家({
方向：{…结果}，
马克：是的，
})
}否则{
错误（`error fetching directions${result}`）；
}
});
}
}
})
)（道具=>
{props.directions&&
}
);
}

对不起我的英语，谢谢你