0

I am developing a web app with react. In it, we are implementing a map floating through geolocation. However, dependency warning appears in the use of useEffect part. I've tried solving it several times, but I couldn't resolve these two dependencies. Is there any way to solve it?

    useEffect(() => {
    dispatch(changeBar("null", {title:"활동",data:null}, "null", "null", "null", "small"));  //상단바 변경
    script.onload = () => {  //kakao map script 로딩 완료 시, loading상태 true 로 변경
        window.kakao.maps.load(() => {
            creation();
        });
    };
}, [dispatch]);

Line 180:8: React Hook useEffect has missing dependencies: 'creation' and 'script'. Either include them or remove the dependency array react-hooks/exhaustive-deps

    const creation = () => {  //좌표 받아와서 맵 생성
    getLocation()
    .then((res) => {
        createMap(res.latitude, res.longitude);
    });
};

const getLocation = async() => {
    if (navigator.geolocation) {  // GPS를 지원하면
    return new Promise(resolve => {
        navigator.geolocation.getCurrentPosition((position) => {
            resolve({
                latitude: position.coords.latitude,
                longitude: position.coords.longitude,
                timestamp: position.timestamp
            });
            if (window.getLoc1State()===true) {  //true: loc1에 업데이트, false: loc2에 업데이트
                setLoc1({lat: position.coords.latitude, lon: position.coords.longitude}); //speed: coords.speed, timestamp: coords.timestamp})
                setTime(moment(position.coords.timestamp).diff(moment(window.getStartTime())));
                setLoc1State(false);
            } else {
                setLoc2({lat: position.coords.latitude, lon: position.coords.longitude}); //speed: coords.speed, timestamp: coords.timestamp})
                setTime(moment(position.coords.timestamp).diff(moment(window.getStartTime())));
                setLoc1State(true);
            }
            localStorage.setItem('lastIndex',window.getIndex()); //로컬스토리지에 마지막 인덱스 업데이트
        },
        (error) => {
            alert(error.message);
        },
        {
            enableHighAccuracy: true,  //높은 정확도
            maximumAge: 0,  //0:항상 최신 위치, Infinity:캐시에 저장된 위치
            timeout: Infinity  //Infinity
        },
        );
    }).then((coords) => {
        localStorage.setItem('location'+window.getIndex(), JSON.stringify({"lat": coords.latitude, "lon": coords.longitude, "timestamp": coords.timestamp}));
        setIndex(window.getIndex()+1);
        return coords;
    })
    }
    alert('GPS를 지원하지 않습니다');
};
sunpl13
  • 107
  • 6
  • 1
    have you read https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook – John Lobo Jun 06 '21 at 09:54

0 Answers0