Как использовать async / await с ловушкой useEffect React, я пробовал много примеров и ничего не работает

Question

Мне нужно реализовать async / await с помощью ловушки Eact React. Я перепробовал много способов. Каждый раз, когда у меня появляется ошибка: хуки могут вызываться только внутри тела компонента функции.

import React, { useEffect } from 'react'
import { ActivityIndicator, StatusBar, StyleSheet, View } from 'react-native'
import * as Keychain from 'react-native-keychain'
import useEffectAsync from '../utils'

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  }
})

const AuthLoadingScreen = ({ navigation }) => {
  useEffect(() => {
    const fetchData = async () => {
      const data = await Keychain.getGenericPassword()
      console.log('data', data)
      navigation.navigate(data ? 'App' : 'Auth')
    }
    fetchData()
  }, [])

  const { container } = styles
  return (
    <View style={container}>
      <ActivityIndicator />
      <StatusBar barStyle="default" />
    </View>
  )
}

export { AuthLoadingScreen }

Answer 1

Все выглядит хорошо, но попробуйте это также,

export const AuthLoadingScreen = ({ navigation }) => {...}

Или

const AuthLoadingScreen = ({ navigation }) => {...}

export default AuthLoadingScreen;

Answer 2

Я бы обернул его в анонимную функцию и немедленно вызвал бы:

Я мог бы попробовать это:

const AuthLoadingScreen = ({ navigation }) => {
  useEffect(() => {
   (async () => {
      const data = await Keychain.getGenericPassword()
      console.log('data', data)
      navigation.navigate(data ? 'App' : 'Auth')
    })()

  }, [])

  const { container } = styles
  return (
    <View style={container}>
      <ActivityIndicator />
      <StatusBar barStyle="default" />
    </View>
  )
}

Если это сработало, дайте мне знать, потому что я тоже изучаю React Hooks: D.