J'ai deux composants natifs de réaction, l'un est le profil (montrant les détails de l'utilisateur connecté) et un autre pour la connexion.
Dans le composant de connexion, j'ai défini les détails de l'utilisateur sur AsyncStorage .
AsyncStorage.removeItem("user")
Ajout d'un utilisateur à AsyncStorage:
componentDidMount() {
AsyncStorage.getItem("user").then(user => {
console.log(user)
this.setState({user})
})
}
Dans le composant de profil, j'ai lu le AsyncStorage
const user = {
fname:"Tenusha",
lname:"Guruge"
}
AsyncStorage.setItem("user",JSON.stringify(user))
Lors de la déconnexion, j'efface le AsyncStorage:
import {AsyncStorage} from 'react-native';
Le problème est une fois que je me connecte et que je configure l'utilisateur détails à AsyncStorage , il stocke les données et je peux les afficher dans le composant de profil. Une fois l'utilisateur déconnecté, les données stockées sont effacées, mais lorsque je navigue vers le composant de profil, les données précédemment chargées sont toujours là.
J'ai besoin d'un moyen de lire les données AsyncStorage actuelles chaque fois que l'utilisateur accède au composant de profil.
3 Réponses :
Existe-t-il un moyen possible de remonter / de renvoyer le composant lors de la navigation
Votre problème est que votre état n'est pas effacé lorsque vous utilisez DrawerNavigator à la place, vous pouvez utiliser stackNavigator si vous voulez que votre composant se démonte lors de la navigation et de l'effacement automatique de l'état .
Une autre approche peut être d'utiliser une bibliothèque de gestion d'état telle que redux ou flux et effacer l'état chaque fois que l'utilisateur se déconnecte.
Pour être sûr qu'un composant est démonté, vous pouvez utiliser createSwitchNavigator .
Vous pouvez utiliser un loginScreen comme enfant tandis que l'autre enfant est votre Drawer .
Lorsque vous vous déconnectez, effacez votre asyncStorage, puis accédez à l'écran de connexion et SwitchNavigator démontera votre tiroir.
DrawerNavigation gardera les écrans actifs tout en se déplaçant entre ses fils après le premier focus de chaque écran, ce qui fera que chaque componentDidMount ne sera déclenché qu'au premier rendu.
Utilisez-vous un StackNavigator comme conteneur de navigation?
createDrawerNavigator, createAppContainer