支付接口是异步的,还没等到结果返回就打开新的页面

来源:12-6 【购物模块完成】购物车下单

吕士杰

2022-10-05

pages/shoppingCart/ShoppingCart.tsx:

<PaymentCard 
	loading={loading}
    originalPrice={shoppingCartItems.map(s => s.originalPrice).reduce((acc, item) => acc + item, 0)}
    price={shoppingCartItems.map(s => s.originalPrice *  ( s.discountPresent ? s.discountPresent : 1 )).reduce((acc, item) => acc + item, 0)}
	onCheckout={() =>{
      if (shoppingCartItems.length <= 0) {
           return
         }
         dispatch(checkout(jwt))
         navigate('/pay')
       }}
	  onShoppingCartClear={() => dispatch(clearShoppingCartItem({jwt: jwt||'',itemsId: shoppingCartItems.map(item => item.id) }))}
/>

onCheckout 方法中,执行异步方法 dispatch(checkout(jwt)),没有等到接口请求成功就执行了打开支付页的逻辑。

写回答

1回答

浅芷初夏

2023-01-29

记住一个原则,凡是处理异步问题,99%的情况都可以使用 async/await 解决,如下:

//img.mukewang.com/szimg/63d695e90912d35d19201016.jpg

//img.mukewang.com/szimg/63d695e9098dc9ba19201030.jpg


0
0

React18 系统精讲 结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发,获取必备技能

1993 学习 · 1015 问题

查看课程