javascript - react 必须点击一下才能网络请求？

问题描述

问 题

我想点击按钮loading：true显示loading界面
然后请求数据 有结果loading:false 跳转页面。

现在输入用户名密码点击登录显示loading页面 然后就一直loading 并没有去网络加载数据,导致loading一直为true。必须点击一下才可以去请求数据。
如果将注释的地方去掉 就可以正常去加载数据。
求解怎么回事？
如图：

    handLogin = async() => {
        console.log('handLogin');
        let data = {'email': this.state.username, 'password': this.state.password};
        
        
        //把这里注释掉
        this.setState({
            loading:true,
        });
        //
        
        
        console.log('网络请求');
        const flag = await Post(URL.login,ToQueryString(data));
        console.log('flag',flag);
        if (flag&&flag.status==='000000') {
            this.toDrawer();
        }else{
            Toast.show('邮箱或密码错误', {
                duration: Toast.durations.LONG,
                position: Toast.positions.BOTTOM,
                shadow: true,
                animation: true,
                hideOnPress: true,
                delay: 0
            });
        }
    };

    check =()=>{
        console.log('username',this.state.username);
        console.log('password',this.state.password);
        if (!this.state.username || !this.state.username.trim()) {
            Toast.show('请输入您的邮箱', {
                duration: Toast.durations.LONG,
                position: Toast.positions.BOTTOM,
                shadow: false,
                animation: true,
                hideOnPress: true,
                delay: 0
            });
            return;
        }
        if (!this.state.password || !this.state.password.trim()) {
            Toast.show('请输入您的密码', {
                duration: Toast.durations.LONG,
                position: Toast.positions.BOTTOM,
                shadow: false,
                animation: true,
                hideOnPress: true,
                delay: 0
            });
            return;
        }
        
        //把这里注释掉
        this.setState({
            loading:true,
        });
        //
        
        this.handLogin();
    };

   render() {
        //把这里注释掉
        if(this.state.loading){
            return (<LoadingSpinner
                text={'正在登录...'}/>)
        }
        //
        
        
        return (<Button block info onPress={() => this.check()} style={commonStyles.button}>
                            <Text>立即登录</Text>
                        </Button>)
    }

网络请求函数

export async function Post(url,params) {
    try {
        let res = await api.post(url, {
            body:params,
        });
        console.log('response', res);
        const resJson = JSON.parse(res.body);
        console.log('response.body', resJson);
        console.log('resJson',resJson.result);
        if (res.err)
            throw res.err;
        if(resJson.status !== '000000'&&resJson.status !== 200){
            return false;
        }
        return resJson;
    } catch (err) {
        console.log(err);
        throw err;
    }
}

解决方案

这个问题 还是没有办法解决 不过貌似只在debug状态出现 将debug状态关闭就好了
应该是rn的bug 算了反正也不影响.

这篇关于javascript - react 必须点击一下才能网络请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！