Can't save state in React while POST API request

Question

I have handleSubmit function that send two POST request, one for img upload and one for other information. I want to take the response from the img upload request and take the 'filename' and then store it in state so I can sent it with the other POST request.

Here is my Request Options

const postOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.serviceToken}`
    },
    body: JSON.stringify({
        p_emp_id: empId,
        p_pr_doc_type: docType,
        p_from_date: fromDate,
        p_to_date: toDate,
        p_doc_number: docNumber,
        p_addres: address,
        p_addres_en: addressEN,
        p_doc_store: docPath,
        p_creator_id: creator,
        p_org_id: org
    })
};

Then here is my Handle Submit function

const handleSubmit = async (e) => {
    e.preventDefault();
    const data = new FormData();
    data.append('file', selectedFiles);
    await fetch(`${config.apiHost}single/`, {
        method: 'POST',
        body: data
    })
        .then((res) => res.json())
        .then((img) => setDocPath(img.filename))
        .catch((err) => {
            console.log(err.message);
        });
    setEditOpen(false);
    fetch(`${config.apiHost}api/employees/info/pr_docs/new/`, postOptions);
    console.log(postOptions.body);
};

My state docPath stays empty while I'm trying to submit so after that I can't see it in my request.

Answer 1

you can refactor your code to this and lets see if it works;

let postOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.serviceToken}`
    },
    body: {
        p_emp_id: empId,
        p_pr_doc_type: docType,
        p_from_date: fromDate,
        p_to_date: toDate,
        p_doc_number: docNumber,
        p_addres: address,
        p_addres_en: addressEN,
        p_creator_id: creator,
        p_org_id: org
    }
};

for the handle submit it can be

const handleSubmit = async (e) => {
    e.preventDefault();
    const data = new FormData();
    data.append('file', selectedFiles);
    await fetch(`${config.apiHost}single/`, {
        method: 'POST',
        body: data
    })
        .then((res) => res.json())
        .then((img) => {
const postOptionsBody = {...postOptions.body, p_doc_store : img.filename }

postOptions = {...postOptions, body : JSON.stringify(postOptionsBody) }
setDocPath(img.filename)
})
        .catch((err) => {
            console.log(err.message);
        });
    setEditOpen(false);
    fetch(`${config.apiHost}api/employees/info/pr_docs/new/`, postOptions);
    console.log(postOptions.body);
};