Неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента (реактивный)

Ошибка: Неверный вызов ловушки. Хуки можно вызывать только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

  1. У вас могут быть несоответствующие версии React и рендерера (например, React DOM).
  2. Возможно, вы нарушаете правила хуков.
  3. У вас может быть более одной копии React в одном приложении.

Я пытаюсь реализовать разрешение на местоположение в React Native (я использую expo CLI)

это функция, которую я уже создал:

function OfferScreen({ navigation}: {navigation:any}) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);
  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });


      //GEOLOCATION TEST
      //STATE FOR GEOLOCATION
  const [location, setLocation] = useState < any | null > (null);
  const [hasPermission, setHasPermission] = useState < any | null > (null);
    useEffect(() => {
      (async () => {
          const {status} = await Location.requestForegroundPermissionsAsync();
          setHasPermission(status === "granted");
          let location = await Location.getCurrentPositionAsync({});
      })();
  }, []);
}
export default OfferScreen;

и это целевая функция на моей панели вкладок

<Tab.Screen //TABSCREEN OFFER
                options={
                    {headerShown: false}
                }
                name={"Offres"}
                component={Offers}/>

и, кстати, когда я удаляю код разрешения местоположения, он работает нормально.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не можете иметь useState() внутри React.useEffect(). Переместите эти операторы вверх и за пределы useEffect.

function OfferScreen({ navigation }: { navigation: any }) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);

  //GEOLOCATION TEST
  //STATE FOR GEOLOCATION
  const [location, setLocation] = (useState < any) | (null > null);
  const [hasPermission, setHasPermission] = (useState < any) | (null > null);

  React.useEffect(() => {
    if (!loading && data) {
      (async () => {
        const { status } = await Location.requestForegroundPermissionsAsync();
        setHasPermission(status === "granted");
        let location = await Location.getCurrentPositionAsync({});
      })();
    }
  }, [data, loading]);

  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });
  }, []);
}

export default OfferScreen;

спасибо, но все та же ошибка.

khalil hajri 09.04.2022 06:42

может быть из-за вложенного useEffect. Я отредактировал ответ.

Satya S 09.04.2022 06:51

Другие вопросы по теме