将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>
}

Answer 2

按照以下步骤完成

    const[name,setname]=React.useState("");
const[flag,setFlag]=React.useState(false)
    const getCreds = async() => {
       let username= await AsyncStorage.getItem('username')
    setname[username];
setFlag[true];
    }
if(!flag)
{
getCreds();
}
    ...
    <Text>{name}</Text>