Блог

Главная - Вопросы по программированию - реагирует на извлечение собственных данных с использованием useEffect, но получает ошибку ссылки: не удается найти переменную: getListOfRecipe

реагирует на извлечение собственных данных с использованием useEffect, но получает ошибку ссылки: не удается найти переменную: getListOfRecipe

#react-native #rest #axios #use-effect

#реагирует на собственные #rest #axios #use-effect

Вопрос:

Я пытаюсь получить данные в своем приложении react native, используя useEffect , но я получаю следующую ошибку:

Ошибка ReferenceError: не удается найти переменную: getListOfRecipe .

Я пытался найти, как использовать useEffect , но я не смог ее решить.

Это мой компонент:

 const RecipeCard = ({ }) => {
  const [recipeList, setRecipeList] = useState([])
  useEffect(() => {
    function getListOfRecipe(){
      axios({
        method: 'get',
        url: 'http://192.168.0.7:3333/report',
        responseType: 'json',
        headers: {},
        data: {
          name: "acem"
        }
      })
        .then(function (res) {
          setRecipeList(res)
        })
        .catch(function (error) {
          console.log(error);
          console.log("######## CARD CALL - ERROR!!! :: ", error);
        })
        .then(function () {
        });
    } []
  })
    
  console.log('getListOfRecipe: ', getListOfRecipe())
  
  return (
    <View>
      <Text>
        Recipe Card:
      </Text>
    </View>
  )
}

export default RecipeCard

Может ли кто-нибудь помочь мне исправить это и выполнить вызов api fetch для получения данных API?

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

1. Что делает дополнительный then() после catch() do? Я думаю, вы также можете просто удалить ее, если хотите, чтобы данные, к которым вы обращаетесь, находились в состоянии, а не при запуске функции.

Ответ №1:

Когда вы запускаете функцию в a useEffect() , вам нужно вызвать ее, просто определив ее внутри useEffect() , она не будет запущена.

Во-вторых, когда вы хотите распечатать значения, которые вы храните в состоянии, вы получаете к ним доступ, используя 1-й элемент useState , который вы определяете. Здесь вы устанавливаете данные, используя setRecipesList then, чтобы получить к ним доступ, который вы используете recipeList .

Но данные не устанавливаются сразу, когда вы извлекаете данные из API. Итак, вы проверяете, существуют ли данные, затем используете if оператор, а затем вы console.log(recipeList) .

 const RecipeCard = ({ }) => {
  const [recipeList, setRecipeList] = useState([])
  useEffect(() => {
    function getListOfRecipe(){
      axios({
        method: 'get',
        url: 'http://192.168.0.7:3333/report',
        responseType: 'json',
        headers: {},
        data: {
          name: "acem"
        }
      })
        .then(function (res) {
          setRecipeList(res)
        })
        .catch(function (error) {
          console.log(error);
          console.log("######## CARD CALL - ERROR!!! :: ", error);
        })
    getListOfRecipe();   
    } []
  })
    
  if(recipeList){
      console.log(recipeList)
  }

  
  return (
    <View>
      <Text>
        Recipe Card:
      </Text>
    </View>
  )
}

export default RecipeCard