data storage with Async Storage

Question

Good night. my problem is this, I have a js file that stores a value of a property with Async Storage, and I want to show this value that was stored in another js file. However when I call this function read the value the React gives me a Warning "Function are not Valid as a React Child..." And does not show on screen the value that was typed previously

'''File that stores'''

export default class Form extends Component{

constructor(props){
    super(props)
    this.state = {
        personName : '',
    }
}

goToHomePage = async() => {
    if(this.state.personName == ''){
       alert('Informe seu nome')
    }else{
        try {
            await AsyncStorage.setItem('name', this.state.personName)
            Actions.home()
        } catch(e){
            return e
        }
    }
}



render(){
    return(
        <View style={styles.container}>
            <Text style={styles.text}>
                Obrigado por nos ajudar no combate a dengue ! 
            </Text> 

            <TextInput style={styles.input} 
                placeholder="Informe seu nome" 
                placeholderTextColor="#fff"
                onChangeText={(personName) => this.setState({personName})}
                value = {this.state.personName}  
            />

                <TouchableOpacity style={styles.button}
                    onPress = {this.goToHomePage} 
                >

                    <Text style={styles.buttonText}>
                        Entrar
                    </Text>

                </TouchableOpacity>

        </View>

    )
}

}

'''File that should show the value'''

export default class Home extends Component{

getData = async() => {
    try{
        const username = await AsyncStorage.getItem('name')
        if(username !== null){
            return username
        }
    }catch(e){
        return e
    }

}

render(){
    return(

        <View style={styles.container}>
            <Text style={styles.text}>
                {this.getData}
            </Text>
        </View>
    )
}

}

Answer 1

From what I’ve seen, you’re running the function that fetches Asyncstorage data within the Home component render. Try to recover the value when loading the component and then pass the data to a state that will update the Text component. Make the following change:

export default class Home extends Component{
	
	state = {
		usuario: ""
	}

	getData = async() => {
		var nome_usuario = "";
		try{
			const username = await AsyncStorage.getItem('name')
			if(username !== null){
				nome_usuario = username;
			}
		}catch(e){
			//return e
		}
		return nome_usuario;

	}
	
	async componentDidMount() {
		const nome_usuario = await this.getData();
		this.setState({ usuario: nome_usuario});
    }

	render(){
		return(

			<View style={styles.container}>
				<Text style={styles.text}>
					{this.state.usuario}
				</Text>
			</View>
		)
	}
}