определение расстояния между местоположением пользователя и каждым грузовиком в массиве местоположений грузовиков - PullRequest
Новая
       21

определение расстояния между местоположением пользователя и каждым грузовиком в массиве местоположений грузовиков

0 голосов
/ 26 марта 2020

Я разрабатываю приложение React для отслеживания продовольственных грузовиков, для которого репозиторий Github можно найти здесь: https://github.com/jevoncochran/Food-Truck-TrackR. Я пытаюсь написать код для получения расстояния между местоположением пользователя и каждым грузовиком в массиве грузовиков с едой. Для этого я использую Google Matrix API. Как только компонент панели пользователя клиента (DinerDash.js) отображается, у меня запускается следующая функция в хуке useEffect для вычисления расстояний: 

const getTruckDistance = () => {
        props.trucks.forEach((truck) => {
            props.getTruckDistances(props.location, truck.current_location);
            })
    }

useEffect(() => {
            getTruckDistance();
    }, [props.trucks])

props.trucks и props.location извлекаются из избыточного числа штат.

Это действие, которое отправляется при запуске getTruckDistance в хуке useEffect: 

export const getTruckDistances = (userLocation, truckLocation) => dispatch => {
    dispatch({ type: CALCULATE_TRUCK_DISTANCE_START })
        axios.get(`https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=${userLocation}&destinations=${truckLocation}&departure_time=now&key=${GOOGLE_API_KEY}`)
            .then(res => {
                console.log(res);
                dispatch({ type: CALCULATE_TRUCK_DISTANCE_SUCCESS, payload: res.data.rows[0].elements[0].distance.text })
            })
            .catch(err => console.log(err))
}

Вот как это действие должно обновить состояние избыточности: 

case CALCULATE_TRUCK_DISTANCE_START:
            return {
                ...state,
                isLoading: true
            }
        case CALCULATE_TRUCK_DISTANCE_SUCCESS:
            return {
                ...state,
                isLoading: false,
                truckDistanceArr: [...state.truckDistanceArr, action.payload]
            }

Идея состоит в том, чтобы запустить getTruckDistances для каждого грузовика в массиве продовольственных грузовиков, находящихся в избыточном состоянии. Затем, чтобы сохранить расстояние, которое возвращается в избыточном состоянии в массиве с именем truckDistanceArr. Я не уверен, что это лучший способ сделать это. В любом случае, это не работает. Я получаю сообщение об ошибке, в котором говорится, что state.truckDistanceArr не повторяется (см. Изображение ниже). Может кто-нибудь помочь мне с тем, как go отсюда. Даже если есть лучший способ сделать это sh, я хочу иметь возможность отображать все грузовики в props.trucks с соответствующими расстояниями, рассчитанными из props.location. Это оказывается довольно сложной задачей. enter image description here

...