Пользовательский хук useFetch() не извлекается

#reactjs #react-hooks #fetch

#reactjs #реагирующие хуки #выборка

Вопрос:

У кого-нибудь есть идея о том, почему этот useFetch хук ничего не извлекает? Chrome Devtools говорит, что идентификатор beerId в порядке, он передается, он считывается внутренней асинхронной функцией, но выборка не отправляется вообще. Вкладка Сеть не показывает никакого вызова API. Следовательно, результат — это пустой объект, а не хороший. Что я упускаю из виду? В остальном API работает нормально, мои другие вызовы возвращают ответы в порядке. Ваше здоровье.

 export const useFetch = (beerId, initialValue) => {
    const [isLoading, setLoading] = useState(false);
    const [data, setData] = useState(initialValue); 
    useEffect(() => {
        async function fetchBeerById() {
            try {
                setLoading(true)
                const res = await fetch(`https://api.punkapi.com/v2/beers/${beerId}`);
                const beer = await res.json();
                setData(beer)
            } catch (err) {
                console.log(err)
            } finally {
                setLoading(false)
            }
        }
        fetchBeerById()
    },[beerId])
    return { data, isLoading}
}

Вот как я использую его в приложении:

 const BeerDetails = () => {
  // get id from URL
  const params = useParams();
  const { beerId } = params;
  debugger
  // fetch that beer, apply local price
  const { data } = useFetch(beerId, {})
  const beer = usePriceBeer(data)
  
  // get the selected data from beer
  const selectBeerData = getSelectedBeerDetails(beer)
  const { name, image_url, abv, ibu, price, tagline, description } = 
  selectBeerData;
 
  return (...render jsx using above vars)
  
}

И вот что я вижу в DevTools. По какой-то причине fetch команда является неудачной. Если я наведу курсор res мыши, ничего не появится, вызов API даже не будет запущен. Фактически, весь useEffect блок просто пропускается, даже isLoading не возвращается к false.

1. Не могли бы вы привести пример того, как вы используете эту функцию?

2. ^^^ да, нужно посмотреть, как вы используете его в своем приложении

3. Код, который вы опубликовали, работает нормально. Как уже упоминалось выше, вам следует отредактировать свой вопрос и добавить способ использования этого пользовательского хука.

4. спасибо, ребята, я отредактировал вопрос для большего контекста. Виноват крючок useEffect, но я не знаю, как заставить эту чертову штуку сработать…

Ответ №1:

Проблема может заключаться в том, что при начальной загрузке данные равны нулю, и вы получаете пустой объект.

Я попытался создать для него прототип и просто вернуть null, если данных нет. Поэтому данные возвращаются только при выходе с isLoading.

https://codesandbox.io/s/recursing-banzai-b2y0c

обязательно проверьте строки 26 и 40

1. Привет, Содхи, это сработало в изолированной среде, но не в приложении. Это загадка.

2. давай проверим это вместе, если хочешь.

3. Привет, Содхи, это было бы здорово. Когда вам было бы удобно? Мы могли бы подключиться по скайпу и поделиться экраном… приветствия

4. Свободно свободно связаться со мной по любому вопросу, мы можем организовать звонок.

Ответ №2:

Как вы используете свой пользовательский хук? Если вы используете его таким образом, он должен работать так, как ожидалось:

 const App = () => {
  const { data, isLoading } = useFetch(10, {});

  if (isLoading) {
    return <h1>Loading...</h1>;
  }

  return <p>{JSON.stringify(data, null, 2)}</p>;
};

export default App;

Кстати, ответ, возвращаемый из вашего API, представляет собой массив, а не объект, вы можете изменить его, чтобы вернуть один объект, если хотите:

 const [beer] = await res.json();
setData(beer);