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

Question

我想点击按钮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;
    }
}

Answer 1

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

Answer 2

你注释的地方是state的重新赋值，这样这个组件就会重新渲染
建议：onPress改成onclick 改变state的位置，其实只需要一处即可，在handLogin里面

Answer 3

你好,根据你的代码,大致修改如下:

• check() 中去除 this.setState({loading:true})

• handLogin() 中在 const flag = await Post(URL.login,ToQueryString(data)); 之后添加this.setState({loading:false})

思路

• check() 作为登录之前前置验证,没必要加入更改组件状态的操作(不过得结合你的业务,起码单从你的代码段来说)

• handLogin() 才是登录的主逻辑,可以去变更登录相关的状态,比如:请求之前setState({loading:true}),请求结束后setState({loading:false});

希望能帮到你~