React.js - get response from a POST method

Question

const [calculatedData, setCalculatedData] =useState(""); 

const calculateOrder = async() =>{

    try{
        
        const dataBody = `json=${encodeURIComponent(JSON.stringify(testInfo))}`;

        const responseObj = await fetch('API', {

            method: 'POST',
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: dataBody
        });

        const res = await responseObj.json();
        setCalculatedData(res);
        console.log(res); // Perfectly display data

    } catch(e){

        console.log(e)
    }
    
}

I am trying to save the response data to 'calculatedData', but I only get an empty string. Can anyone provide me any suggestion?

console.log(calculatedData) //Empty string

doubt: where are you printing `calculatedData` ? – trk Mar 06 '21 at 22:09 — trk, Mar 06 '21 at 22:09
I tried everywhere before rendering – Frances Mar 06 '21 at 22:12 — Frances, Mar 06 '21 at 22:12

score 0 · Answer 1 · answered Mar 06 '21 at 21:58

useState (or setCalculatedData) is asynchronous(just like setState) and changes would not be reflected immediately. As the data is not stored yet in the calculatedData when you console it, you would only receive the empty string. Please follow this answer for more information

React.js - get response from a POST method

1 Answers1