Question

如果用户未登录，我正在尝试呈现 Signin 组件，如果用户已登录，我正在尝试呈现 Home 组件。在登录组件集上存储'isLIn'到'true'在注销 [来自主组件]设置存储< em>'isLIn'到'false'并且每次React-Native App打开时都会检查存储和设置状态为存储的值。

请查看代码：

string bin_type=string.Empty;
while (reader.Read()) {bin_type += reader.GetString(0);}

我不知道为什么但是在Storage获得值之前先查看渲染。根据react-native render（）的生命周期，仅在{strong> componentWillMount（）之后执行React_Doc。

我正在使用AsyncStorage来设置和删除存储空间，并使用React-Native-Router-Flux进行路由。

我尝试过解决方案：

Answer 1

由于您所做的是异步，因此您无法告诉生命周期等待它。但是React提供了状态，你可以使用这些状态。

state = {
    isLoggedIn: false
    isLoading: true
  };

并在异步

中设置状态

_loadInitialState = async () => {
    try {
        let value = await AsyncStorage.getItem(KEY);
        if (value !== null && value === 'true') {
          this.setState({ isLoggedIn: true, isLoading: false });
        } else {
          this.setState({ isLoggedIn: false, isLoading: false });
        }
    } catch (error) {
      console.error('Error:AsyncStorage:', error.message);
    }
  };

然后在你的渲染方法中，你可以放置一个占位符，直到你的asynctask完成

render() {
 if(this.state.isLoading) return <div> Loading... </div>
 else return...
}

Answer 2

在componentWillMount中调用setState不会触发重新呈现。 componentWillMount在状态设置之后和视图重新呈现之前运行。来自React Native Docs：

“componentWillMount（）在安装发生之前立即调用。它在render（）之前调用，因此在此方法中设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。” - https://facebook.github.io/react/docs/react-component.html#componentwillmount

相反，您应该在_loadInitialState

中致电componentWillReceiveProps()

React-native：在从Storage获取数据之前呈现视图

2 个答案: