React中form表单POST提交后如何获取响应数据

问题原因 #

原生HTML表单默认提交会触发浏览器页面跳转，直接加载action指向的第三方站点地址，当前React应用的运行上下文会被完全销毁，无法捕获提交请求的响应数据。

解决方案 #

你可以通过阻止表单默认提交行为，手动发起POST请求获取响应，再根据需求完成后续逻辑处理。

改造后的代码示例 #

import React from 'react'

function PagarCoinPayments() {
  // 表单提交处理函数
  const handleSubmit = async (e) => {
    e.preventDefault()
    // 构造表单数据
    const formData = new FormData()
    formData.append('cmd', '_pay_simple')
    formData.append('reset', '1')
    formData.append('merchant', 'XXX')
    formData.append('item_name', '5 materias, mes de octubre')
    formData.append('currency', 'USDT')
    formData.append('amountf', '5')
    formData.append('want_shipping', '0')

    try {
      // 手动发起POST请求
      const res = await fetch('https://www.coinpayments.net/index.php', {
        method: 'POST',
        body: formData
      })
      // 解析响应数据，根据接口返回格式调整，比如json、text等
      const resData = await res.json()
      // 这里写你需要的响应数据处理逻辑
      console.log('提交成功，响应数据：', resData)
      // 处理完成后跳转到指定站点
      window.location.href = '你要重定向的目标地址'
    } catch (err) {
      // 异常处理逻辑
      console.error('提交失败：', err)
    }
  }

  return (
    <div className="container d-flex justify-content-center h-100 align-items-center">
      <div className="card text-center bg-dark col-md-4 animate__animated animate__fadeInUp">
        <img src="" alt=""/> 
        <div className="card-body text-light"> 
          <h4 className="card-title ">Confirmación de pago</h4>
          <br/>
          <h6 className="card-title ">Nombre y Apellido: John Doe</h6>
          <br/>
          <h6 className="card-title ">Cédula: 27.000.000</h6>
          <br/>
          <h6 className="card-title ">Descripción: 5 materias, mes de octubre</h6>
          <br/>
          <h6 className="card-title ">Monto: 375 USDT</h6>
        </div>
        {/* 绑定提交事件 */}
        <form onSubmit={handleSubmit}>
          <input type="hidden" name="cmd" value="_pay_simple"></input>
          <input type="hidden" name="reset" value="1"></input>
          <input type="hidden" name="merchant" value="XXX"></input>
          <input type="hidden" name="item_name" value="5 materias, mes de octubre"></input>
          <input type="hidden" name="currency" value="USDT"></input>
          <input type="hidden" name="amountf" value="5"></input>
          <input type="hidden" name="want_shipping" value="0"></input>
          <input type="image" src="https://www.coinpayments.net/images/pub/buynow-grey.png" alt="Comprar ahora con CoinPayments.net"></input>
        </form>
      </div>
      <br/>
      <br/>
      <br/>
    </div>
  )
}

export default PagarCoinPayments

注意事项 #

• 如果直接请求CoinPayments接口出现跨域错误，需要将请求转发到你的后端服务，由后端代理发起请求再将结果返回给前端。
• 若涉及支付流程，建议配合CoinPayments的回调通知机制做支付结果的二次校验，避免前端伪造支付状态。

内容的提问来源于stack exchange，提问作者Edward Pizzurro