useEffect и контекстный API

Question

У меня возникла странная проблема с useEffect, которая не замечает изменения значений, изменяемых с помощью context api. У меня есть выборка, которую я хочу запускать каждый раз при изменении определенного значения, и я использую api контекста для управления своим значением состояния, но, похоже, этого никогда не замечает. У меня не было этой проблемы, когда я передавал props вместо использования context api. Есть ли уловка, которую я не использую? Ошибка консоли: ./src/Components/CustomTrip.js Строка 33:12: React Hook useEffect имеет отсутствующую зависимость: 'fetchDistance'. Либо включите его, либо удалите массив зависимостей react-hooks / excustive-deps

import React, {useContext, useEffect } from 'react'
import { COORDS } from "./coords"
import { MileContext } from './MileContext';
import useCalculateTotals from "./CalculateTotals";

    const CustomTrip = () => {
      const {locationOne, locationTwo, setLocationOne, setLocationTwo, setTotalMiles } = useContext(MileContext);

      const onLocationOneChange = (event) => {
        setLocationOne(event.target.value)
      }
      const onLocationTwoChange = (event) => {
        setLocationTwo(event.target.value)
      }
      const onTotalMileChange = (value) => {
        setTotalMiles(value)    
      };
      useCalculateTotals();

      async function fetchDistance()
            {
                const res = await fetch("https://api.mapbox.com/directions-matrix/v1/mapbox/driving/" + locationOne + ";" + locationTwo + "?sources=1&annotations=distance&access_token=pk.eyJ1Ijoiam9zaGlzcGx1dGFyIiwiYSI6ImNqeTZwNGF1ODAxa2IzZHA2Zm9iOWNhNXYifQ.X0D2p9KD-IXd7keb199nbg")
                const mapBoxObject = await res.json();
                const meters = mapBoxObject.distances[0];
                const miles = parseInt(meters) *  0.00062137119;
                console.log(miles.toFixed(2));
                onTotalMileChange(miles.toFixed(2));  
                console.log(miles);
            }         

        useEffect(() => {
            fetchDistance()
        }, [locationOne, locationTwo]);

      return (
        <div>
          <h3>Customize your trip</h3>
            Mileage will be calculated as a round trip.
            <br/>
            Select your starting point
            <select value={locationOne} onChange={onLocationOneChange}>
            {
                Object.entries(COORDS).map(([campus, coordinates]) => (
                <option key={campus} value={coordinates}>
                {campus}
                </option>
            ))}
            </select>
            Select your destination
            <select value={locationTwo} onChange={onLocationTwoChange}>
            {
                Object.entries(COORDS).map(([campus, coordinates]) => (
                <option key={campus} value={coordinates}>
                {campus}
                </option>
            ))}
            </select>
        </div>
      )
    };

export default CustomTrip;

Вот контекст API для большего контекста umm.

import React,{useState, createContext} from 'react';

export const MileContext = createContext();

export const MileProvider = props => {
    const [totalMiles, setTotalMiles] = useState(0);
    const [drivers, setDrivers] = useState(1);
    const [rentalPaddingDay, setRentalPaddingDay] = useState(1);
    const [hotelCost, setHotelCost] = useState(0);
    const [hotelDays, setHotelDays] = useState(0);
    const [hotelTotal, setHotelTotal] = useState(0);
    const [drivingDays, setDrivingDays] = useState(0);
    const [hotelNights, setHotelNights] = useState(0);
    const [hours, setHours] = useState(0);
    const [meals, setMeals] = useState(0);
    const [laborCost, setLaborCost] = useState(0);
    const [truck26Total, setTruck26Total] = useState(0);
    const [truck16Total, setTruck16Total] = useState(0);
    const [vanTotal, setVanTotal] = useState(0);
    const [mealCost, setMealCost] = useState(0);
    const [vanFuelCost, setVanFuelCost] = useState(0);
    const [rental26Cost, setRental26Cost] = useState(0);
    const [rental16Cost, setRental16Cost] = useState(0);
    const [truck26Fuel, setTruck26Fuel] = useState(0);
    const [truck16Fuel, setTruck16Fuel] = useState(0);
    const [trip, setTrip] = useState("Custom");
    const [locationOne, setLocationOne] = useState("-97.4111604,35.4653761");
    const [locationTwo, setLocationTwo] = useState("-73.778716,42.740913");
    const [gas, setGas] = useState(2.465);
    const [diesel, setDiesel] = useState(2.91);

    return (
        <MileContext.Provider 
        value = {{
            totalMiles, 
            setTotalMiles, 
            drivers, 
            setDrivers,
            rentalPaddingDay,
            setRentalPaddingDay,
            hotelCost,
            setHotelCost,
            hotelDays,
            setHotelDays,
            hotelTotal,
            setHotelTotal,
            drivingDays,
            setDrivingDays,
            drivers,
            setDrivers,
            hotelNights,
            setHotelNights,
            hours,
            setHours,
            meals,
            setMeals,
            laborCost,
            setLaborCost,
            truck26Total,
            setTruck26Total,
            truck16Total,
            setTruck16Total,
            vanTotal,
            setVanTotal,
            mealCost,
            setMealCost,
            vanFuelCost,
            setVanFuelCost,
            rental26Cost,
            setRental26Cost,
            rental16Cost,
            setRental16Cost,
            truck26Fuel,
            setTruck26Fuel,
            truck16Fuel,
            setTruck16Fuel,
            trip,
            setTrip,
            locationOne,
            setLocationOne,
            locationTwo,
            setLocationTwo,
            gas,
            setGas,
            diesel,
            setDiesel
        }}>
            {props.children}    
        </MileContext.Provider>
    )
}

Answer 1

Код в порядке, если не считать опечатки в другом файле. При дальнейшем просмотре я обнаружил, что в импортируемом объекте COORDS есть пробелы, которые при размещении в URL-адресе для вызова API конвертируются в% 20. Удаление пробелов сразу устранило проблему.

Answer 2

Используйте это, и он будет работать

    const contextObj = useContext(MileContext);

    useEffect(() => {
        fetchDistance()
    }, [...Object.values(contextObj)]);