Реагировать на собственное асинхронное получение данных

Question

Я использую componentWillMount в реагирующем для получения данных из API. Но когда я попытался сохранить токен во время входа в систему. Это не может работать. Я понятия не имею, в чем проблема /

componentWillMount(){

        let token = this.getData
        fetch('http://192.168.0.125:8887/api/auth/activities/index',{
            method: 'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer '. token,
            },
        })
        .then((response) => response.json())

        .then((res) => {
            //console.log(res)

        })
        .catch((e) => console.log('Error: ', e))
    }

    getData = async () => {
        let token =''
        try{
            token = AsyncStorage.getItem('id_token')
            console.log(token)
        }catch (error) {
            console.log('AsyncStorage error: ' + error.message);
        }
        return token
    }

Answer 1

хорошо, AsyncStorage.getItem () - это обещание, поэтому вам нужно использовать await для получения токена до console.log.

const token = await AsyncStorage.getItem('id_token')

Answer 2

Не совершайте вызов API внутри ComponentWillMount. Сделайте это внутри ComponentDidMount. И для вашей проблемы - попробуйте подождать AsyncStorage.getItem ('id_token'), потому что AsyncStorage - это обещание.

или вы можете сделать

componentDidMount(){
    AsyncStorage.getItem('id_token').then(this.getData)
}



getData=(token)=>{
   fetch('http://192.168.0.125:8887/api/auth/activities/index',{
        method: 'POST',
        headers:{
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer '+ token,
        },
    })
    .then((response) => response.json())

    .then((res) => {
        //console.log(res)

    })
    .catch((e) => console.log('Error: ', e))
    }