react.js - React+Redux+antd-mobile 应用中 全局Loading 组件的使用问题?
本文介绍了react.js - React+Redux+antd-mobile 应用中 全局Loading 组件的使用问题?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我的使用场景:是在进入页面时
React 的 componentWillMount 方法中 去服务器请求用户信息
通过redux dispatch 一个异步的 方法发起ajax请求,同时显示一个Toast.loading('正在加载')
请求执行完成后通过reducer 更新用户的信息,在页面中通过props判断用户是否加载成功。
如果成功会使用Toast.hide()关闭刚才的loading。
这些都是没问题的。
但是我第二次使用Toast.loading 显示其他信息的时候。弹不出loading框,发现在上面的
render方法中先判断了用户是否加载成功,然后给我直接hide掉了。
请问大家在使用全局Loading 的时候是怎么处理的。
class XXX extends React.Component{
componentWillMount(){
//获取用户名
const {userName} = this.props.params;
//参数0表示一直显示loading,Toast.hide()才能关闭
Toast.loading('正在加载...',0);
//通过用户名加载用户详情(ajax请求后台)
this.props.fetchUserDetail(userName);
}
onClick(){
//问题在这里,当这里弹出lading的时候,render方法中的
// isFetchUserSuccess 是true,接着就给我关闭了。界面上什么都看不到
//通过redux改变isFetchUserSuccess的值好像不合理
// 这里该如何处理?
Toast.loading('xxx',0);
}
render(){
const {isFetchUserSuccess} =this.props
if (isFetchUserSuccess) {
Toast.hide();
}
return(
<button onClick={this.onClick}></button>
);
}
}
export default connect(
state=>({
isFetchUserSuccess:state.userReducer.isFetchUserSuccess
}),
{UserActions}
)(XXX);
解决方案
好吧。。。没有用过antd
,说一下我的想法吧。
按照你的代码来改,你不要再render
里面通过isFetchUserSuccess
来决定是否隐藏Toast
,而是通过action
是否结束来判断。this.props.fetchUserDetail(userName).then(Toast.hide);
这篇关于react.js - React+Redux+antd-mobile 应用中 全局Loading 组件的使用问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文