POST API 请求时无法在 React 中保存状态

Question

我有发送两个 POST 请求的 handleSubmit 函数，一个用于 img 上传，一个用于其他信息。我想从 img 上传请求中获取响应并获取 'filename' 然后将其存储在状态中以便我可以将其与其他 POST 请求一起发送。

这是我的请求选项

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
    })
};

然后这是我的 Handle Submit 函数

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);
};

在我尝试提交时，我的状态 docPath 保持为空，因此之后我无法在我的请求中看到它。

Answer 1

你可以重构你的代码，看看它是否有效；

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
    }
};

句柄提交可以

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);
};

POST API 请求时无法在 React 中保存状态

Can't save state in React while POST API request

javascript

api

request

reactjs