首次挂载后,React Native组件不会触发componentDidMount()

时间:2019-07-15 06:29:44

标签: react-native react-navigation expo asyncstorage

我有两个React Native组件,一个是个人资料(显示已记录的用户详细信息),另一个是用于登录。

在登录组件中,我将用户详细信息设置为ObjectProvider

AsyncStorage

将用户添加到AsyncStorage:

import {AsyncStorage} from 'react-native';

在个人资料组件中,我读了const user = { fname:"Tenusha", lname:"Guruge" } AsyncStorage.setItem("user",JSON.stringify(user))

AsyncStorage

注销后,我清除了componentDidMount() { AsyncStorage.getItem("user").then(user => { console.log(user) this.setState({user}) }) }

AsyncStorage

问题是一旦我登录并将用户详细信息设置为AsyncStorage.removeItem("user") ,它就会存储数据,我可以在配置文件组件中查看它们。用户注销后,存储中的数据将被清除,但是当我导航到配置文件组件时,以前加载的数据仍然存在。

每次用户导航到配置文件组件时,我都需要一种方法来读取当前的AsyncStorage数据。

3 个答案:

答案 0 :(得分:2)

要确保已卸载组件,可以使用createSwitchNavigator

您可以将loginScreen用作孩子,而另一个孩子是您的Drawer

注销时,清除asyncStorage,然后导航到loginScreen,SwitchNavigator将卸载抽屉。

DrawerNavigation将在每个屏幕的第一个焦点之后在其子级之间移动时保持屏幕处于活动状态,从而使每个componentDidMount仅在第一次渲染时被触发。

答案 1 :(得分:0)

  1. 在此处跟踪导航更改并清除状态
  2. 考虑像redux这样的状态管理器,这将是最干净的方法

答案 2 :(得分:0)

您的问题是,使用DrawerNavigator时不会清除您的状态,相反,如果您想在导航和自动清除状态时卸载组件,则可以使用stackNavigator

另一种方法是使用状态管理库,例如redux或flux,并在用户注销时清除状态。