Merhaba,
axios la API den veri çekiyorum bunun için de async kullanıyorum ki return edildiği zaman veriler gelsin. Ama finally bloğunda kontrol ettiğim zaman veri(details.id mesela) hala gelmemiş oluyor. Ama En aşağıda return kısmındaki DisplayRecipe componentinde kontrol ettiğimde veri gelmiş oluyor ama iş işten geçmiş oluyor çünkü boş veri return edilmiş oluyor zaten ya da koşul belirtmesem bir önceki veri ekrana geliyor.
Sorun nerede sizce?
23 ve 59. satırlar

function Recipe() {
  const [details, setDetails] = useState([]);
  const [activeTabs, setActiveTabs] = useState("ingredients");
  const [isLoading, setIsLoading] = useState(false);
  const params = useParams();
  let isMounted = null;
  useEffect(() => {
    isMounted=true;
    const source = axios.CancelToken.source();
    const getDetails = async () => {
  
      const options = {
        method: "GET",
        url:`https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
        headers: {
          "X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
          "X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
        },
        cancelToken: source.token,
      };
  
        setIsLoading(true);
        try {
           await axios.request(options).then((response)=> response.data[0]
          ).then((res)=>{
            if (isMounted) {
              setDetails(res);
               console.log(details)
             }
          })
          
        } catch (err) {
          if (isMounted) {
            setDetails([]);
             console.log(err.message)
          }
        } finally {
           setIsLoading(false);
           console.log('params id: '+params.id+ ' details id: '+details.id)
        }
  
        const cleanUp = ()=>{
          isMounted=false;
          source.cancel();
          
        }
        return cleanUp;
      
      
    }
    getDetails();
  
  }, [params.id]);

  
  return (
    <DetailWrapper>
      {isLoading && <p>...Loading</p>}
      {!isLoading &&  details.id==params.id && <DisplayRecipe params={params.id} details={details} activeTabs={activeTabs} setActiveTabs={setActiveTabs} Button={Button}/>}
    </DetailWrapper>
  );
}