如何在React Redux中有效地应用Google Distance Matrix服务？

问题描述

我正在获取包含送货车辆当前位置和订单目的地的订单列表，并在Redux Store中存储列表。

当前，我已经在组件中实现了距离矩阵服务，并在App.js文件中执行了该服务，并逐个传递每个订单并使用回调更新了订单。

有什么有效的方法吗？

将订单映射到距离矩阵组件，而不是在App.js中呈现：

distanceMatrix = this.props.orders.map((order,index) => {
    return (
        <distanceMatrix
            key={index}
            order={order}
            orderIndex={index}
            callbackMethod={this.props.orderdistanceUpdate} />
    );
});

这是距离矩阵分量：

const distanceMatrix = (props) => {

    return (
        <LoadScript
            googleMapsApiKey = {process.env.REACT_APP_GOOGLE_KEY} >
            <distanceMatrixService
                options={{
                        destinations: [{lat: +props.order.vehicle_lat,lng: +props.order.vehicle_lon}],origins: [{lng: +props.order.order_lon,lat: +props.order.order_lat}],travelMode: "DRIVING",}}
                callback = {(response,status) => {
                    const modResponse = {
                        planned_arrival: formatRelative(Date.parse(props.order.planned_arrival),new Date()),estimated_arrival: formatRelative(addSeconds(new Date(),response.rows[0].elements[0].distance.value),estimated_distance: (response.rows[0].elements[0].distance.value / 1000).toFixed(1) + " KM",destination_addresses: response.destinationAddresses[0],origin_addresses: response.originAddresses[0],};
                    return props.callbackMethod(props.orderIndex,props.order.order_id,modResponse);
                }}
                />
        </LoadScript>
    );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）