异步/等待功能无法正常运行

Question

我是使用async / await的新手，据我了解，我可以将该函数声明为异步函数，然后在该函数内部使用await。

我要执行的代码仅在document.getElementById('PrePayeezyForm').submit()函数完成后才运行updateNewInvoice。 UpdateNewInvoice函数正在将数据设置到我的Redux存储中，并且我有一个引用存储中数据的表单。

问题在于，最后一行的运行速度如此之快，以至于表单在设置之前就引用了存储中的空数据。如果我使用setTimeout，它可以工作，但我不想这样做。谢谢您的帮助。

import styles from './styles.module.scss'

const FormPayeezy = ({
  payeezyArray,
  removeInvoiceModal,
  updateNewInvoice,
  updatePO,
  customer
}) => {

  async function updateNewInvoices(event) {
    event.preventDefault()
    //save amount to redux and generate form values
    let amount = event.target.x_amount.value
    let customer = event.target.customer.value
    await updateNewInvoice(amount, customer)
    document.getElementById('PrePayeezyForm').submit();
  }

  function updatePOs(event) {
    //save PO to redux
    updatePO(event.target.value)
  }

  function hideModal(event) {
    event.preventDefault()
    removeInvoiceModal()
  }

  return (
    <form id="PrePayeezyForm" className={styles.addInvoiceForm} method="post" action="https://demo.globalgatewaye4.firstdata.com/payment" onSubmit={updateNewInvoices}>
      <input name="x_login" value={payeezyArray.login} type="hidden" />
      <input name="x_invoice_num" value={payeezyArray.payment_num} type="hidden" />
      <input name="x_fp_sequence" value={payeezyArray.sequence} type="hidden" />
      <input name="x_fp_timestamp" value={payeezyArray.timestamp} type="hidden" />
      <input name="x_fp_hash" value={payeezyArray.hash} type="hidden" />
      <input name="x_show_form" value="PAYMENT_FORM" type="hidden" />
      <input name="x_relay_response" value="TRUE" type="hidden" />
      <label>Payment Description</label>
      <input type="text" required name="loadNum" id="loadNum" onBlur={updatePOs} />
      <label>Payment Amount</label>
      <input type="text" required name="x_amount" id="x_amount" />
      <input required name="customer" id="customer" value={customer} type="hidden" />
      {payeezyArray.items}
      <button className={styles.buttonAdd} type="submit"
      >Pay Invoice</button>
      <button className={styles.buttonCancel}
        onClick={hideModal}
      >Cancel</button>
    </form>
  )
}

export default FormPayeezy

//////////////////////////////////////////

  updateNewInvoice = async (amount, customerid) => {
    const { updatePayeezyCustomer, updatePayeezyAmount } = this.props
    updatePayeezyAmount(amount)
    updatePayeezyCustomer(customerid)
    let loadid = this.props.payeezyArray.PO
    let note = `New Invoice for PO #: ${loadid}`
    let paymentInfo = {
      'other': [
        {
          customerid,
          note,
          amount: Number(amount)
        }
      ]
    }
    this.props.getPaymentResponse(paymentInfo, (id) => {
      this.props.updatePayeezyPaymentNum(id)
    })
    let timestamp = Math.floor(Date.now() / 1000)
    this.props.updatePayeezyTimestamp(timestamp)
    let hash = createPayeezyHash(this.props.payeezyArray, timestamp, amount)
    this.props.updatePayeezyHash(hash)
    let value = `${this.props.payeezyArray.PO}<|><|>PO ${this.props.payeezyArray.PO}<|>1<|>${amount}<|>N`
    let content = <input name="x_line_item" value={value} type="hidden"></input>
    this.props.updatePayeezyItems(content)
  }