React Hook "useState" или React Hook "useEffect" вызывается в функции, которая не является ни функцией React

Question

TL; DR: Моя цель состоит в том, чтобы отделить функции API и импортировать их, когда они мне понадобятся. А затем позвоните им по сценарию componentDidMount. Кроме того, мне сказали, что async и await должны использоваться с, поскольку: getCurrentPosition является асинхронной функцией.

---

Answer 1

Все подсказки, которые вам нужны для решения вашей проблемы, приведены в коде ошибки

1. Крюки или пользовательские крючки предназначены для использования в функциональных компонентах
2. Пользовательский крючок - это крючок, который можно вызвать как функцию. Тем не менее, он должен иметь префикс use, чтобы дать знать, что это пользовательский хук

В соответствии с вышеуказанным условием ваш компонент Weather является компонентом класса, который либо нужно преобразовать в функциональный компонент или избегайте использования геолокации в качестве пользовательского хука

Во-вторых, поскольку geoLocation предназначен для пользовательского хука, вы должны называть его useGetLocation

import React from 'react';
import { useGetLocation } from './getlocation';

const Weather =  (props) =>  {
    const geoLocation = useGetLocation();
    useEffect(() => {
        document.title = "Weather";
    }, []);

    return(
        <>
        <h1>Weather</h1>
        <h2>{React.version}</h2>
        </>
    );
}

export default Weather;

---

import {useState, useEffect} from 'react';

export const useGetLocation = () => {
    const [position, setPosition] = useState({});
    const [error, setError] = useState(null);

    const successHandler = ({coords}) => {
        setPosition({
            latitude: coords.latitude,
            longitude: coords.longitude
        });
    };

    const errorHandler = (error) => { setError(error.message); };

    useEffect(() => {
        if (!navigator.geolocation) {
            setError("Geolocation might not be supported.");
            return;
        }

        navigator.geolocation.getCurrentPosition(
            successHandler, 
            errorHandler);

        return () => {}

    }, []);

    return [position, error];
};

Рабочая демоверсия

---

Answer 2

Во-первых, вы должны вызывать хук внутри функционального компонента React, а не класса.

документы :

Hooks .. Позволяет использовать состояние и другие функции React без написания класса.

и

Только перехватывать вызовы из функций React

Во-вторых, измените getGeolocation на useGeolocation

документы :

Пользовательский хук - это функция JavaScript, имя которой начинается с «use» .. .

Если функция не запускается с «use», React не будет рассматривать ее как ловушку и не позволит вам вызывать ловушки внутри нее

Answer 3

Вы не можете вызвать крюк внутри класса. Крючки можно вызывать только внутри компонентов без состояния. Если вы хотите получить доступ к этой информации, вы должны либо преобразовать ее в HO C, либо преобразовать класс componentDidMount в функцию. https://reactjs.org/docs/hooks-faq.html#what -кан-я-делаю-с-зацепками-то-я-не-с-классами