Получить данные AsyncStorage в <Text></Text>

Question

Я пытаюсь получить имя пользователя от AsyncStorage (React-Native).И проанализируйте эти данные в <Text></Text>.

Мой текущий код ничего не отображает.

Код для получения данных

getCreds = () => {
    return AsyncStorage.getItem('username')
}
...
<Text>{this.getCreds()}</Text>

HomeScreen.js

Код для хранения данных

export const onSignIn = (username, pswd) => {
  AsyncStorage.setItem('username', username).done();
  AsyncStorage.setItem('pswd', pswd).done()
}

auth.js

Мой вопрос: как я могу получить имя пользователя из AsyncStorage и проанализировать <Text></Text> в моей функции рендеринга?

Answer 1

Ваша проблема в том, что AsyncStorage.getItem, который вы можете получить по имени, является асинхронным вызовом, поэтому вам необходимо учитывать это при вызове.

вызывать его таким образом

constructor(props) {
    super(props);
    this.state = {username: null};
    this.loadCredentials();
}

async loadCredentials() {
    try {
        const username = await AsyncStorage.getItem('username');
        this.setState({username: username});
    }
    catch (error) {
        // Manage error handling
    }
}

render() {
     const {username} = this.state;
     if (username != null) {
         return <Text>{username}</Text>
     }
     return <Text>Loading text...</Text>
}