reactjs - 当主页 View 导航到登录 View 时,如何触发登录的useEffect?

标签 reactjs

基本上在login中,我有一个函数可以验证 token 是否存在,如果存在,则自动重定向到home View ,否则它将保留在 >登录查看。

登录

const Login = props => {
   const [loading, setLoading] = useState(true); 

   useEffect(() => {
    getTokenPrevious();
   }, [loading]);


    const getTokenPrevious = () => {
    AsyncStorage.multiGet(["token"])
        .then(value => {
            let token = value[0][1];

            if (token !== null) {
                props.navigation.navigate("home");
            } else {
                setLoading(false);
            }
        })
        .catch(error => {
            setLoading(false);
        });
   };


   if (loading) {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Loading...</Text>
                <Spinner color={STYLES.bgHeader.backgroundColor} />
            </View>
        );
    }

  return (
    rest code login....

有时,当我在主页 View 中使用手机的后退按钮时,或者当我尝试点击注销按钮时,会出现此情况将我重定向到登录 View ,但显示了这部分:

        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Loading...</Text>
                <Spinner color={STYLES.bgHeader.backgroundColor} />
            </View>
        );

应该显示的部分是这样的:

  return (
    rest code login....

因为 token 已被删除而不再存在。

首页

const Home= props => {

 clearStorage = () => {
 AsyncStorage.removeItem("token")
  .then(() => {
    props.navigation.navigate("Login");
  })

 };

 return (
 <View>
  <Button onPress={clearStorage()} ><Text>Logout</Text></Button>
 <View>
 )
}

我该如何解决这个问题?

最佳答案

<Button onPress={clearStorage()} ><Text>Logout</Text></Button>

clearStorage() 调用该方法,当加载时。 从clearStorgae中删除()。

<Button onPress={clearStorage} ><Text>Logout</Text></Button>

关于reactjs - 当主页 View 导航到登录 View 时,如何触发登录的useEffect?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59367698/

相关文章:

ruby-on-rails - Heroku 路线上带有 React 应用程序的 Rails 无法在刷新时工作

reactjs - fork 项目返回未经授权的 token

JavaScript 无法在上传前重命名文件

reactjs - react JSX : Unique Key Prop in Conditional Array

reactjs - 使用带有 Typescript 的样式化组件,prop 不存在?

javascript - 如何将 POST 请求中的数据保存为变量,以便在 GET 请求中使用?

javascript - React 组件正在渲染,然后消失

javascript - 在 react 中获取导入函数的未定义值

javascript - ReactJS 如何使用状态钩子(Hook)获取超时的文本更改按钮列表?

javascript - 未捕获的类型错误 : Cannot read property 'state' of null in react