Reactjs 异步/等待函数未按预期工作

我不熟悉使用async/await，据我所知，我可以将该函数声明为异步函数，然后在该函数内部使用await

我希望我的代码只在

updateNewInvoice

函数完成后运行

document.getElementById（'preadwardeezyform'）.submit（）

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

从“./styles.module.scss”导入样式
const formpayezy=({
帕耶扎雷，
移除NVOICEMODAL，
更新WinVoice，
更新，
顾客
}) => {
异步函数updateNewInvoices（事件）{
event.preventDefault（）
//将金额保存到redux并生成表单值
让金额=event.target.x_amount.value
让客户=event.target.customer.value
等待更新WinVoice（金额、客户）
document.getElementById（'preadwardeezyForm'）.submit（）；
}
函数更新（事件）{
//将采购订单保存到redux
updatePO（event.target.value）
}
函数hideModal（事件）{
event.preventDefault（）
RemoveInvoiceModel（）
}
返回(
付款说明
付款金额
{payezyarray.items}
付款发票
取消
)
}
导出默认FormPayezy
//////////////////////////////////////////
UpdatenWinVoice=async（金额，客户ID）=>{
const{updatePayeezyCustomer，updatePayeEzyMount}=this.props
updatePayeezyAmount（金额）
updatePayeezyCustomer（customerid）
让loadid=this.props.payezyarray.PO
let note=`采购订单的新发票#：${loadid}`
让paymentInfo={
“其他”：[
{
客户ID，
注意，
金额：数字（金额）
}
]
}
this.props.getPaymentResponse（paymentInfo，（id）=>{
this.props.updatePayeezyPaymentNum（id）
})
让timestamp=Math.floor（Date.now（）/1000）
this.props.updatePayeezyTimestamp（时间戳）
let hash=createPayezyHash（this.props.PayezyArray，timestamp，amount）
this.props.updatePayeezyHash（散列）
让value=`${this.props.payezyarray.PO}PO${this.props.payezyarray.PO}1${amount}N`
让内容=
this.props.updatePayeezyItems（内容）
}

“只有在UpdatenWinVoice函数完成之后”——这就是实际发生的情况。如果您仍然有问题-它在其他地方。您可以粘贴整个异步函数的代码，包括如何声明它吗？显示整个组件的代码也可能有帮助。我已经更新了代码，因此您有了更多的上下文。看起来您没有在

updateNewInvoice

的任何地方使用

wait

。

updatePayeezyMount

&

updatePayeezyCustomer

是否可能是异步函数？和/或

updateNewInvoice

中需要等待的其他项目？

这个.props.getPaymentResponse

看起来是异步的-它有一个clalback-你没有等待它运行-除此之外，如果你从未在其中等待，为什么

updateNewInvoice

是异步的？这似乎是一件很奇怪（但又太普通）的事情