React使用axios发送带请求体的post请求实现优惠券购买功能

核心逻辑：你的每张优惠券卡片（MediaCard组件）已经通过props接收了当前优惠券的完整数据props.coupon，只需要在购买按钮的点击事件里，直接调用post接口，把这个对象作为请求体发送即可。

1. 修正Card组件的点击事件 #

你的handleSubmit现在只做了登录判断，补充购买请求逻辑即可，修改后的完整代码如下：

interface CardProps {
  coupon?: CouponModel;
}

export default function MediaCard(props: CardProps) {
  const history = useHistory();
  const classes = useStyles();

  // 改成异步函数，处理异步请求
  async function handleSubmit(){ 
    // 未登录跳转逻辑保留
    if(!store.getState().authState.user) {   
      notify.error(SccMsg.NOT_LOGGED);   
      history.push('/login')
      return
    }
    try {
      // axios.post第二个参数就是请求体，直接传入当前优惠券对象即可
      const response = await axios.post<CouponModel>(globals.urls.purchasedCoupon, props.coupon);
      // 购买成功后更新全局状态
      store.dispatch(couponPurchasedAction(response.data));
      notify.success("购买成功");
    } catch (err) {
      notify.error("购买失败，请稍后重试");
      console.error(err);
    }
  }

  // 其余render部分的代码保持不变即可
  return (
    <Card className={classes.root}>
      {/* 原有内容不变 */}
      <CardActions>
        <Button onClick={handleSubmit} size="small" color="primary">
          PURCHASE NOW!
        </Button>
      </CardActions>
    </Card>
  );
}

2. 可选优化说明 #

• 如果后端接口只需要优惠券ID不需要完整对象，把请求体改成{ couponId: props.coupon.id }即可，根据你的接口需求调整。
• 你之前写的PurchaseCoupon组件里的请求逻辑是放在componentDidMount里的，这个生命周期只会在组件首次挂载时触发，不符合点击购买才触发的需求，如果你想把购买逻辑抽离出来，可以封装成一个公共的异步函数，在各个需要的组件里引入调用即可。
• 注意axios.post的参数规则：axios.post(请求地址, 请求体, 配置项)，不需要额外套一层{data: {}}，只有当你把请求体写在配置项里的时候才需要用data字段，比如：

  // 这种写法和上面直接传props.coupon是等价的，不推荐这么写，冗余
  axios.post(globals.urls.purchasedCoupon, {}, {
    data: props.coupon
  })
  

内容的提问来源于stack exchange，提问作者Anthony K