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;

这是更多umm上下文的api上下文。

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对象中有空格，当放置在api调用的url中时，该空格将转换为％20。删除空格会立即解决问题。

useEffect和上下文api

2 个答案: