Does anyone have an idea on why this useFetch hook is not fetching anything? Chrome Devtools says the beerId is fine, it is passed in, it is read by the inner async function, but the fetch is not sent at all. Network tab shows no API call. Therefore, the output is an empty object, not good. What am I missing? The API is otherwise fine, my other calls return responses alright. Cheers.
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}
}
This is how I use it in the app:
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)
}
And here is what I see in the DevTools. For some reason, the fetch command is a dud. If I hover over res nothing pops up, the API call is not even fired. In fact, the whole useEffect block is just skipped, not even isLoading is set back to false.
