Question

在我的本机应用程序中，我想显示基于状态的屏幕。

Login.js

export default class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            accessTokenExists: false
        }
    }

     accessvalid = () => {
          tokenStorage.getToken('accesstoken')
        .then(res => {
             fetchTokens.validAccessToken(res)
            .then(res => {
                this.setState({accessTokenExists: true});
                console.log('Existing Accesstoken');
            })
        })
        .catch(err => {
            this.setState({accessTokenExists: false});
            console.log('Not Existing AccesToken');
        })    
    }

    componentWillMount(){
        this.accessvalid();
    };

    componentDidMount() {
        SplashScreen.hide();


    }

    render() {
        if(this.state.accessTokenExists){
            return(<Fingerprint navigation={this.props.navigation}/>)
        } else {
            return(<Password navigation={this.props.navigation}/>)
        }

    }
}

当状态 accesTokenExists 为 true 时，react首先将另一个屏幕渲染一秒钟，然后重新渲染右侧屏幕。

这是因为在我更改 accesvalid 方法的状态之前，API会进行调用。

感谢您的帮助

Answer 1

我相信这是因为您在构造函数中将其设置为false，并且在ComponentWillMount将其设置为true之前需要花费时间。解决此问题的一种方法可能是使用另一个状态变量来呈现加载状态，直到完成检查accessTokenExists为止，该状态变量将指示加载是否完成。顺便说一句，我假设您知道不赞成componentWillMount。

Answer 2

您的请求是异步的。当您在ComponentWillMount中发出此请求时，它将触发该请求，并且组件将继续呈现。由于默认状态为false，因此<Password navigation={this.props.navigation}/>会呈现。

当返回返回时，如果成功，则将安装另一个组件。您希望将“正在请求”的条件作为组件可能处于处理该状态的状态。

屏幕渲染两次

2 个答案: