useEffect 和上下文 api

Question

我运行遇到了一个奇怪的问题，useEffect 没有注意到随着上下文 api 而改变的值的变化。每次更改某个值时，我都想运行进行提取，并且我正在使用上下文 api 来管理我的状态值，但它似乎从未注意到。当我传递道具而不是使用上下文 api 时，我没有遇到这个问题。我没有使用这个技巧吗？控制台错误是：./src/Components/CustomTrip.js 行 33:12：React Hook useEffect 缺少依赖项：'fetchDistance'。包括它或删除依赖数组 react-hooks/exhaustive-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

使用这个，它会起作用

    const contextObj = useContext(MileContext);

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

Answer 2

除了另一个文件中的拼写错误外，代码还不错。经过进一步审查，我发现正在导入的 COORDS 对象中有空格，当放置在 url for api 调用中时，这些空格被转换为 %20。删除空格立即解决了问题。

useEffect 和上下文 api

useEffect and the context api

reactjs

react-context

use-effect