typeerror: cannot read property of undefined javascript – empty JSON object from fetch despite postman showing object from API

My react app is supposed to attain a JSON object to display information onto dashboard. There is an object when I check postman using the URL which is what I want to use however when trying to access the fields from the object I am getting a type error of undefined javascript. Even when I console log the object it is an empty array.

The below is the fetch request which has worked for all other aspects of the application but not for this part of it.

API call in Postman using the same URL gives the following response:

[
    {
        "average_hb": "85.27",
        "average_os": "92.84",
        "max_hb": "86.35",
        "max_os": "96.54"
    }
]

get/ call response on chrome developer tools:

Request URL: http://127.0.0.1:8000/dashboard/utilisation/T/detail/get/
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: http://localhost:3000
Allow: GET, HEAD, OPTIONS
Content-Length: 79
Content-Type: application/json
Date: Tue, 07 Sep 2021 21:07:37 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.7.7
Vary: Accept, Origin, Cookie
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

The outcome I would like from this is to be able to display the values of the four variables (average_hb etc.) onto application. These fields come from Django back end which as mentioned, does return an object when looking in postman.

function UtilisationDetail(props){   

    var average_hb = 0;
    var average_os = 0;
    var max_hb = 0;
    var max_os = 0;

    const [utilisations, setUtilisation] = useState([]);
  
    useEffect(()=>{
        fetch(`http://127.0.0.1:8000/dashboard/utilisation/${props.warehouseState}/detail/get/`, {
            method:'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then( resp => resp.json())
            .then(resp => setUtilisation(resp))
            // .catch( error => console.log(error) )     
    }, [props.warehouseState]) 

    function setDetails(){
        try{
            console.log(utilisations)
            average_hb = utilisations[0].average_hb;
            average_os = utilisations[0].average_os;
            max_hb = utilisations[0].max_hb;
            max_os = utilisations[0].max_os;
        }
        catch(e){

        }
    }

    return(
        <div>
            {setDetails}
            <h4>Space</h4>

                <p>Average HB {average_hb}</p>
                <p>Average OS {average_os}</p>
                <p>Max HB {max_hb}</p>
                <p>Max OS {max_os}</p>
          
        </div>
    )




}

export default UtilisationDetail;

Answer

You need to use another useEffect for setDetails() that is dependent on utilisations, and have a guard against the utilisations.length

useEffect(() => {

if(utilisations.length) setDetails()

}, [utilisations]) 

And then handle your return statement differently to render the output.