Async-await akışı yanlış. Siz fonksiyonu async yapıp, içerisinden await olarak bir fetch işlemi almışsınız. Buraya kadar problem yok ama Fetch'in çıktısı async edilmemiş. .then'ler ile state ayarlamaları yapmışsınız ancak .then dönüşleri yok. Ek olarak useEffect'ten fonksiyonu async olarak çağırmamışsınız. Gerçi çağırılsa bile dışarıya çıktı vermiyor şu anda fonksiyon. useParams cache tutmaz. Ne geliyorsa onu direkt olarak vermesi gerekir.
Dediğiniz üzere bu şekilde değişiklik yaptım. Ama sonuç yine aynı.
const getDetails = async () => {
setIsLoading(true);
// setDetails([]);
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
"X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
},
};
await fetch(
`https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
options,
{ signal: controller.signal }
)
.then(async (response) => await response.json())
.then(async (response) => await setDetails(response[0])
)
const cleanUp = () => {
controller.abort();
setIsLoading(false);
};
return cleanUp();
};
useEffect(() => {
getDetails();
}, [params.id]);