Блог

Главная - Вопросы по программированию - Недопустимые исчерпывающие ограничения в перехватах реакции

Недопустимые исчерпывающие ограничения в перехватах реакции

#javascript #reactjs #axios #react-hooks #use-effect

#javascript #reactjs #аксиос #реагирующие крючки #эффект использования

Вопрос:

Я использую перехват реакции для извлечения данных из covid api с использованием axios, но он выдает ошибку

 React Hook useEffect has a missing dependency: 'countries'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

где находится мое государство

Код:

 const [countries,setCountries]=useState([]);

  useEffect(()=>{
    axios.get('https://disease.sh/v3/covid-19/countries').then(response=>{
      //console.log(response.data);
      setCountries(response.data);
      console.log(countries);
    }).catch((error)=>{
      console.log(error);
    })

  },[]);

Я пробовал использовать все решения, предоставленные другими форумами, но это совершенно нормально, о чем упоминают некоторые решения. Почему этот код не работает?

Комментарии:

1. Не входите countries в систему после вызова setCountries() . Вот почему useEffect() is требует этого как зависимости.

2. Ошибка описывает, что не так. Вы используете countries (значение состояния) внутри useEffect , не объявляя его как dependency ( useEffect(()=>{/*...*/}, [countries]); ) . Итак, как прокомментировал Патрикробертс, удалите console.log . Это все равно привело бы к устаревшим данным.

3. @Yoshi вы не должны объявлять это как зависимость, иначе побочный эффект застрянет в бесконечном цикле.

4. если я это сделаю, журнал появится в бесконечном цикле, но я хочу, чтобы это происходило только при обновлении страницы

5. Также стоит отметить, что значение countries не будет обновляться внутри хука, так что вы получите «старое» значение countries , если все равно зарегистрируете его там. Чтобы увидеть там новые данные, вам нужно войти response.data

Ответ №1:

Если вы используете countries в своем перехватчике, вы должны добавить его в свои dep. В противном случае вы прочитаете устаревшее значение, поскольку значение состояния countries еще не было обновлено:

 useEffect(()=>{
    axios.get('https://disease.sh/v3/covid-19/countries').then(response=>{
      //console.log(response.data);
      setCountries(response.data);
      console.log(countries);
    }).catch((error)=>{
      console.log(error);
    })
  },[countries]);

Однако в вашем случае я бы посоветовал не добавлять countries ваши dep, потому что вы также вызываете setCountries свой хук. Таким образом, ваш перехват будет введен снова, потому countries что изменился.
Вы должны скорее регистрировать значение стран за пределами вашего перехватчика, если вам это нужно.

 console.log(countries);

useEffect(()=>{
    axios.get('https://disease.sh/v3/covid-19/countries').then(response=>{
      //console.log(response.data);
      setCountries(response.data);
    }).catch((error)=>{
      console.log(error);
    })
  },[]);

Ответ №2:

Если вы добавляете какие-либо переменные, которые можно изменить в useEffect, вам будет предложено обновить массив зависимостей.Вы регистрируете страны, вот почему вы видите это предупреждение.

Если вы хотите глубже понять useEffect и о массиве зависимостей, блог Дэна Абрамова о полном руководстве по Useeffect будет очень полезен

Метки: