React Native 组件在第一次安装后不会触发 componentDidMount()

Question

我有两个 React Native 组件，一个是配置文件（显示记录的用户详细信息），另一个用于登录。

在登录组件中，我将用户详细信息设置为 AsyncStorage。

import {AsyncStorage} from 'react-native';

正在将用户添加到 AsyncStorage：

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，它就会存储数据，我可以在配置文件组件中查看它们。用户注销后，存储中的数据将被清除，但是当我导航到配置文件组件时，之前加载的数据仍然存在。

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

Answer 1

Answer 2

您的问题是在使用 DrawerNavigator 时您的状态没有被清除，如果您希望组件在退出并自动清除状态时卸载，您可以使用 stackNavigator。

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

Answer 3

要确保组件已卸载，您可以使用 createSwitchNavigator。

您可以将一个 loginScreen 用作 child，而另一个 child 是您的 Drawer。

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

DrawerNavigation 将保持屏幕处于活动状态，同时在每个屏幕的第一个焦点之后的 child 秒之间移动，使每个 componentDidMount 仅在第一次渲染时被触发。

React Native component is not triggering componentDidMount() after first mount