javascript - Kan inte skicka en funktion som parameter från en NextJS-komponent

Jag har den här typen av kod i en NextJS-komponent:

    const [currentGPS, setCurrentGPS] =
            useState({coords:{latitude:0.0,longitude:0.0}})

    useEffect(() => {
      utl.getGPSLocation(
        (v:{coords: {latitude:number; longitude:number;};})=>
        setCurrentGPS(v))
    }, [])

När du använder funktionen nedan:

    function getGPSLocation({callBackFn}:
      {callBackFn:
        (v:{coords: {latitude:number; longitude:number;};}) => void
      }) {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position: {coords: {latitude:number; longitude:number;};}) => {
            callBackFn(position)
            console.log('(U)position.coords.latitude='+JSON.stringify(position.coords.latitude))
            console.log('(U)position.coords.longitude='+JSON.stringify(position.coords.longitude))
          });
      } else {
        console.log("Geolocation is not supported by this browser.");
      }
    } /* End of getGPSLocation */

Jag får detta fel i konsolen för Webb utvecklarverktyg i min webbläsare:

Okänt TypeError: t är inte en funktion
NextJS 10
page-1aeb39b39d44f814.js:1:332

Meddelandet ovan beror på kodraden:

    callBackFn(position)

Om jag kommenterar ut raden ser jag det jag förväntar mig:

(U)position.coords.latitude=25.515932844138406 page-2bc533c4f68ab71b.js:1:339
(U)position.coords.longitude=67.32855152591916 page-2bc533c4f68ab71b.js:1:417

Varför får jag felet? Och vad är sättet att lösa det?

Jag behöver hjälp med att skicka setCurrentGPS (som en callback) till getGPSLocation.

Svar #1

getGPSLocation förväntar sig ett objekt med nyckeln callBackFn som argument. Du kan uppdatera ditt useEffect enligt följande

useEffect(() => {
  utl.getGPSLocation({
    callBackFn: (v: { coords: { latitude: number; longitude: number } }) =>
      setCurrentGPS(v)
  });
}, []);

Eller, du kan ändra funktionsdefinitionen

function getGPSLocation(
  callBackFn: (v: { coords: { latitude: number; longitude: number } }) => void
) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position: { coords: { latitude: number; longitude: number } }) => {
        callBackFn(position);
        console.log('(U)position.coords.latitude=' + JSON.stringify(position.coords.latitude));
        console.log('(U)position.coords.longitude=' + JSON.stringify(position.coords.longitude));
      });
  } else {
    console.log("Geolocation is not supported by this browser.");
  }
}