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屋！