为了账号安全,请及时绑定邮箱和手机立即绑定

react-router路由跳转出现问题,具体场景如下

react-router路由跳转出现问题,具体场景如下

Cats萌萌 2019-05-06 22:13:53
问题描述这么一个场景,2个页面一个是form表单,一个是table列表现在在form表单中使用reduerdispatch新增方法之后,需要跳转到table页面。问题出现的环境背景及自己尝试过哪些方法一开始的做法是在dispatch后面,调用router的push方法,跳转到table页面,但是发现table有一个获取数据的api会在form页面的save方法之前调用,导致获取的数据是form表单提交之前的数据虽然可以使用延迟避免这样的问题。但是想知道是否有别的方法。另外想到的就是在reducer中调用router的push方法来完成路由的跳转相关代码functionformSubmit(e){e.preventDefault()props.form.validateFields((error,value)=>{if(!error){props.saveExpress(value)props.history.push('/express/list')}})}这是调用dispatch之后调用push方法的代码你期待的结果是什么?实际看到的错误信息又是什么?想知道大家正常的逻辑是在哪里调用的查看了antd-pro代码,使用回调函数解决1、改造saveExpressprops.saveExpress(value,()=>props.history.push('/express/list'))2、修改对应的actionexportconstsaveExpress=(express,callback)=>({type:Actions.SAVE_EXPRESS,express,callback})3、修改对应的epic(由于使用的redux-observable所以会有这个方法)constsaveExpress=action$=>action$.pipe(ofType(Actions['SAVE_EXPRESS']),switchMap(params=>postExpress({...params.express}).then(()=>{params.callback()returnsaveExpressSuccess()})))由此问题可以解决
查看完整描述

2 回答

?
繁花不似锦

TA贡献1851条经验 获得超4个赞

改造下saveExpress方法,让此方法提供一个成功的回调,然后将props.history.push('/express/list')写在回调函数中。
                            
查看完整回答
反对 回复 2019-05-06
?
胡子哥哥

TA贡献1825条经验 获得超6个赞

saveExpress异步方法returnPromise,然后使用async/await
props.form.validateFields(async(error,value)=>{
if(!error){
awaitprops.saveExpress(value)
props.history.push('/express/list')
}
})
                            
查看完整回答
反对 回复 2019-05-06
  • 2 回答
  • 0 关注
  • 1199 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信