如何定义操作顺序

Question

目前我有一个新表格，用户填写该表格以创建请求。一旦用户在表单中输入信息并单击提交按钮，事件处理程序就会触发 Promise.all 请求。在 Promise.all 中，有两个 axios.post 请求是异步函数。

一个创建请求，另一个接受用户发表的评论，并应附在请求 ID 上。由于它们是异步函数，我正在尝试获取评论的发布请求以等待请求 ID 的创建以避免竞争条件。我已经通过控制台记录了请求中的数据并且它正确地返回了数据，但是我没有运气调用请求 ID 以在评论的发布请求中使用。

我知道这必须是我所缺少的简单东西。有人有什么建议吗？

//General Imports
import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import {useNavigate} from "react-router-dom"

//Component Imports
import Navbar from "../../components/NavBar/NavBar";

// Context Imports
import { EmployeeInfoContext } from '../../context/EmployeeInfoContext';

//Hooks Imports
import useAuth from '../../hooks/useAuth';

const NewTimeOffRequestPage = (props) => {
    // setting up hooks a good place to start
    const [user, token] = useAuth ()
    const navigate = useNavigate ()
    const [supervisorName, setSupervisorName] = useState('')
    const [hoursRequested, setHoursRequested] = useState('')
    const [approved, setApproved] = useState("False")
    const [balance, setBalance] = useState(0)
    const [comments, setComments] = useState('')
    const [comment, setComment] = useState('')
    const {employee, setEmployee} = useContext(EmployeeInfoContext);
    const [request, setRequest] = useState('')
    const [requestId, setRequestId] = useState('')
    const [dateRequested, setDateRequested] = useState('')

    const addTimeOffRequest = async (newTimeOffRequest) => {
        try 
        {
            let response = await axios.post(`http://127.0.0.1:8000/api/pto_requests/new/`,  newTimeOffRequest, {
                headers: {
                    Authorization: 'Bearer ' + token
                }
            });
            setRequest(response.data)
            // await handleUpdateBalance(updatedPtoBalance);
        } 
        catch (error) 
        {
            console.log(error.message)
        }
    }
        
    const addComment = async (newComment) => {
        console.log(requestId, "Line 95")
        const response = await axios.post('http://127.0.0.1:8000/api/comments/changes/',             newComment);
        console.log(response.data)
        props.getAllComments()
        }
    
    const promiseExecution = async (newTimeOffRequest, newComment) => {
        let promise = await Promise.all([
            addTimeOffRequest(newTimeOffRequest),
            addComment(newComment),
            navigate("/")
            ]);
    }

    function handleRequestSubmit(event){
        event.preventDefault();
        let newTimeOffRequest = {
            employee_id: employee.id,
            date_requested: dateRequested,
            hours_requested: hoursRequested,
            approved: approved,        
        }; 
        promiseExecution(newTimeOffRequest);
        }

    return ( 
        <div><Navbar />
        <div>{employee? 
            (<div className='request-table'>
                <div className='newEntry'>
                <label><b>Employee Number: </b></label>
                {employee.employee_number}
                </div>
                <div className='newEntry'>
                <label><b>Employee Name: </b></label>
                {employee.employee_first_name + " " + employee.employee_last_name}
                </div>
                <div className='newEntry'>
                <label><b>Department:</b> </label>
                {employee.department}
                </div>
                <div className='newEntry'>
                <label><b>Hire Date: </b></label>
                {employee.hire_date}
                </div>
                <div className='newEntry'>
                <label><b>PTO Balance:</b> </label>
                {employee.pto_balance}
                </div>
                <div className='newEntry'>
                <label><b>Supervisor Name:</b></label>
                {employee.supervisor_number}
                </div>
                <div className='newEntry'>
                <label><b>Date Requested Off: </b></label>
                <input type="date" value={dateRequested} onChange={(event) =>  setDateRequested(event.target.value)}/>
                </div>
                <div className='newEntry'>
                <label><b>Hours Requested: </b></label>
                <input type="number" value={hoursRequested} onChange={(event) =>  setHoursRequested(event.target.value)}/>
                </div>                        
                <div className='newEntry'>
                <label><b> Approved: </b></label>
                <input type="boolean" value={approved} onChange={(event) =>    setApproved(event.target.value)}/>
                </div>
                <div className='newEntry'>
                <label><b>Comments: </b></label>
                <input type="text" value={comment} onChange={(event) =>      setComment(event.target.value)}/>
                </div>
                <div className='submit-new-request'>
                    <button onClick={handleRequestSubmit}>Submit Request</button>
                    {/* <button onClick={handleCommentSubmit}>Submit Comment</button> */}
                </div>
            </div>):(<div>NO DATA AVAILABLE</div>)}
        </div>
        </div>
    );
}
export default NewTimeOffRequestPage;`

到目前为止我尝试过的一些事情：

1. 我试过对请求数据使用 setState，但它不允许我设置未安装组件的状态。
2. 我试过在处理评论帖子之前使用 if/else 语句来检查 id 是空白还是 null，但是它
3. 我试过对请求数据使用获取请求，让它有时间处理，然后使用 setState。但是，它仍然给我未安装组件的错误。

我希望用其中之一返回 request.id，但到目前为止没有运气。