React-native ListView 必须点击屏幕才会加载数据

博客讲述了在React-native中ListView数据加载异常的情况,需要点击屏幕后数据才会显示。问题源于逻辑错误,作者在fetchInfo函数获取数据后,应在setInfo的setState中正确设置fetched状态,以确保数据正确渲染。此外,提到了最新RN版本在Chrome调试时可能出现类似问题,可能与性能和调试体验有关。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在改动ListView时发现ListView数据不是在进入界面之后就加载出来,而是要点击屏幕之后才会加载数据,很怪异的bug。
首先函数是这么写的:在fetchInfo()里去获取服务器里的个人信息,然后再设置到页面。整理之后发现还是逻辑问题,以后得多注意思维清晰。

fetchInfo() {
        if(!this.state.fetched) {
            var body = {
                userId: this.state.user_id,
            } ;
            var getSign = this.state.sign.toUpperCase() ;
            var getParams = 'userId=' + this.state.user_id + '&token=' + this.state.token ;
            var paramSign = md5(getParams) ;
            SELFINFO_REQUEST = SELFINFO_URL + '?sign=' + paramSign.toUpperCase() + '&body=' + JSON.stringify(body) ; 
            var infoRequest = encodeURI(SELFINFO_REQUEST) ;
            fetch(infoRequest)
            .then((response) => response.json())
            .then((response) => {
                this.setInfo(response);
            })
            .then(() => {
                this.setState({
                    fetched: true
                })
            )
        }
    }
    setInfo(response) { 
        const status = response.status ;        
        const msg = response.msg ;
        if(status == 0 ) {         
            var data = response.data ;
            var groupName = data.groupName ;
            var name = data.name ;
            var mobile = data.mobile ;
            this.setState({
                group: groupName,
                name: name ,
                tel: mobile,
            })
        } else {
            ToastAndroid.show('个人信息获取失败,请重新登录!',ToastAndroid.SHORT) ;
            ...    
        }
    }
    _changePwd() {
        const { navigator } = this.props ;
        if(navigator) {
            navigator.push({
                name:' ChangePwd' ,
                component: ChangePwd ,
            })
        }
    }
    _logOut() {
        AsyncStorage.setItem('isLogin','false').then(() => {
            AsyncStorage.setItem('user_id','null').then(() => {
                AsyncStorage.setItem('token','null') ;    
            }) ;           
        }).then(() => {
            const { navigator } =this.props ;
            if(navigator) {
                navigator.push({
                    name: 'App' ,
                    component: App ,
                })
            }     
        }).done() ;
    }
    render() {         
        if(!this.state.fetched) {
            return (
                <View style = {styles.loadContainer}>
                    <Text style = {styles.loadTxt} >加载中...</Text>
                </View>
            )
        } else {
             return (            
                <View style = {styles.container} >
                   ...
                </View>
            );
        }               
    }

问题出现了,每次都必须要点击屏幕之后才能加载数据,后来一看逻辑,觉得自己被狗日了。。。。
原因是我在setInfo里去设置个人信息,但是在fetchInfo里已经设置了fetched为true,这样render就不会再执行下面的操作了。把

this.setState({
    fetched: true
})

这句话设置到setInfo里的setState函数里就可以了。

PS:最近版本的RN,在开启Chrome调试时也会出现点击屏幕才加载的bug,不过也可能是官方故意这么做的,毕竟以前是没有这个bug的,而且一到Chrome调试,App就会特别卡,略醉。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值