reactNative: Не могу обработать данные с сервера

Как я могу использовать полученное из AsyncStorage значение для кодировки Base64 ?

Сетаю значение из AsyncStorage в state компонента App (AsyncStorage.setItem() вызываю в thunk, отрабатывает отлично: значения азписываются в хранилище)

class App extends React.Component {

    state = {
        userName: "",
        userPassword: ""
    }

getLogin = async () => {

        try {
            const value = await AsyncStorage.getItem("phoneNumber") || 'none'
            if(value !== null) {
                console.log(value , "getLogin");
                this.setState({userName: value}, console.log(this.state.userName, 'getLogin'))
            }
        } catch(e) {
            console.log(e)
        }
    }

getPassword = async () => {

        try {
            const value = await AsyncStorage.getItem("verificationCode") || 'none'
            if(value !== null) {
                console.log(value, "getPassword");
                this.setState({userPassword: value}, console.log(this.state.userPassword, 'getPassword'))
            }
        } catch(e) {
            console.log(e)
        }
    }


 componentDidMount(){
        this.getLogin()
        this.getPassword()

}

В render() App передаю состояние функции

render() {

    const {userName, userPassword} = this.state
    getServicesApi(userName, userPassword) 

}

Далее, использую функцию getServicesApi для передачи параметров

export function getServicesApi( userName, userPassword) {

const base64token = () => {
    if(userName && userPassword) return Base64.btoa(`+${userName}:${userPassword}`)
}
console.log(base64token(), "base64token")

const  headers = () => new Headers({
    "Content-Type" : "application/json",
    "Authorization" : `Basic ${base64token()}`
})

}

В итоге console выводит ( undefined, undefined, "base64token" )

Где я допустил ошибку ? Предположительно, не срабатывает componentDidMount(). Есть ли патерны для решения подобной ситуации ?


Ответы (1 шт):

Автор решения: Dmitrii Sedov

Ошибка заключается в том, что в методе componentDidMount вызываются два асинхронных метода, которые зависят от результатов выполнения друг друга. А так как Вы не указали await данные приходят позже чем начинается выполнение другой функции. Результат переменные имеют значение undefined

→ Ссылка