我可以循环 componentWillMount 直到我从 API 获得 user_key 吗？答案

【问题标题】：Can I loop componentWillMount until I get the user_key from API?我可以循环 componentWillMount 直到我从 API 获得 user_key 吗？
【发布时间】：2018-10-23 13:52:07
【问题描述】：

如果用户登录与否，我正在尝试使用反应导航身份验证流程来管理登录屏幕。但现在我陷入了 AsyncStorage。因此，当用户未登录时，我认为 componentWillMount 将等到用户输入凭据，点击登录按钮，从 API 调用接收 user_id，然后重试。对我来说，现在它在开始时调用什么很好，但随后我必须退出应用程序并返回以获取仪表板。有什么解决办法吗？

这是我在 App.js 中创建路由的代码。我也在底部加载 redux 地图。

export const createRootNavigator = (signedIn = false) => {
  return SwitchNavigator(
    {
      SignedIn: {
        screen: SignedIn
      },
      SignedOut: {
        screen: SignedOut
      }
    },
    {
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      signedIn: false,
      checkedSignIn: false
    };
  }

  async componentWillMount() {
    await isSignedIn()
        .then(res => this.setState({ signedIn: res, checkedSignIn: true }))
        .catch(err => alert("An error occurred"));
  }

  render() {
    const { checkedSignIn, signedIn } = this.state;

    // If we haven't checked AsyncStorage yet, don't render anything (better ways to do this)
    if (!checkedSignIn) {
      return null;
    }

    const Layout = createRootNavigator(signedIn);
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={{flex: 1, backgroundColor: '#ffffff'}}>
          <StatusBar barStyle="light-content"/>
          <Layout />
          <AlertContainer/>
        </View>
      </SafeAreaView>
    )
  }
};

这是我正在等待 user_key 的 Auth.js。

export let USER_KEY = 'myKey';

export const onSignIn = async () => { await AsyncStorage.setItem(USER_KEY, 'true') };
export const onSignOut = async () => { await AsyncStorage.removeItem(USER_KEY) };

export const isSignedIn = () => {
  return new Promise((resolve, reject) => {
    AsyncStorage.getItem(USER_KEY)
      .then(res => {
        if (res !== null) {
          // console.log('true')
          resolve(true);
        } else {
          resolve(false);
          // console.log('false')
        }
      })
      .catch(err => reject(err));
  });
};

【问题讨论】：

标签： react-native async-await react-navigation

【解决方案1】：

解决方案是使用 Splashscreen。您可以将启动画面添加到应用程序。在显示 Splashscreen 时，检查用户是否存在于 Asyncstorage 中，如果存在，则将用户导航到仪表板/主屏幕，如果 asyncstorage 响应为 null，则将用户导航到登录页面。导航完成后，您可以隐藏启动画面。在 npmjs 中签出这个包以设置 Splashscreen react-native-splash-screen

【讨论】：