从 AsyncStorage (react-native/expo) 将变量加载到钩子后无法渲染内容

Question

我正在用react-native（世博会）开发我的第一个应用程序。我完成了身份验证流程，并使用 AsyncStorage 来保存/管理用户信息和 jwt 令牌。

我为登录用户创建了第一个窗口，但无法呈现“Hello username”消息。

首先，我做了这个存储功能来管理用户和令牌信息：

import AsyncStorage from "@react-native-async-storage/async-storage";

const storage = () => {
  const login = (user, jwt) => {
    AsyncStorage.setItem("user", JSON.stringify(user));
    AsyncStorage.setItem("authToken", `Bearer ${jwt}`);
  };

  const logout = () => {
    AsyncStorage.removeItem("user");
    AsyncStorage.removeItem("authToken");
  };

  const register = (user, jwt) => {
    login(user, jwt);
  };

  const getUser = async () => {
    const user = await AsyncStorage.getItem("user");

    return JSON.parse(user);
  };

  const getAuthToken = async () => {
    const token = await AsyncStorage.getItem("authToken");

    return token;
  };

  return { login, logout, register, getUser, getAuthToken };
};

export default storage;

我称之为 OverviewScreen 的组件如下所示：

import { Text } from 'react-native';
import React, { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import storage from '../utils/storage';

export default function OverviewScreen() {
  const [user, setUser] = useState(null);

  const { getUser } = storage();

  useEffect(() => {
    getUser().then((u) => {
      setUser(u);
    });
  }, []);

  return (
    <SafeAreaView className="flex-1 items-center justify-center">
      {!user ? (
        <Text>Loading...</Text>
      ) : (
        <Text>Hello {user.username}</Text>
      )}
    </SafeAreaView>)
}

我添加了一个 useEffect 来在用户状态更改时打印（

if (user) console.log(user)

），并且它工作正常。我也尝试做同样的行为，像这样编写 useEffect ：

  useEffect(() => {
    const getUserAsync = async () => {
      const u = await getUser();
      setUser(u);
      setIsLoading(false);
    };

    getUserAsync();
  }, []);

我也得到了同样的结果。

有人可以帮助我吗？谢谢！

Answer 1

让我们改变吧

useEffect(() => {
    getUser().then((u) => {
      setUser(u);
    });
  }, []);

到

useEffect(() => {
    AsyncStorage.getItem("user")
      then(result => {
         setUser(JSON.parse(result))
      })
  }, []);

然后看结果

Answer 2

问题是我的错。

OverviewScreen 是由 Tab.Screen 渲染的，我使用 prop Children 而不是组件来引用它。