时间戳

首页 > 解决方案 > React Native 组件在第一次挂载后没有触发 componentDidMount()

react-native - React Native 组件在第一次挂载后没有触发 componentDidMount()

问题描述

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

在登录组件中，我将用户详细信息设置为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每次用户导航到配置文件组件时，我都需要一种读取当前数据的方法。

标签： react-nativereact-navigationexpoasyncstorage

解决方案

为确保组件已卸载，您可以使用createSwitchNavigator.

您可以将 loginScreen 用作子项，而另一个子项是您的Drawer.

注销时，您清除 asyncStorage，然后导航到 loginScreen，然后SwitchNavigator将卸载您的 Drawer。

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

推荐阅读