Reactjs 为什么后端数据在重新加载或保存之前不显示

我有一个配置文件页面，我想从后端获取用户名，这将让我在页面上显示用户的其余信息

我很难做到这一点，但我随后使用异步存储来存储和获取用户名，我知道这不是很传统，但它可以工作。现在的问题是，每当我打开我的应用程序，它都不会显示用户名和信息，直到我转到代码并保存它，然后全部显示出来。我试图使用

setInterval

重新加载它，但它也不起作用。我该怎么办

function UserScreen(props) {
  const navigation = useNavigation();
  const [username, setUsername] = useState();

  const load = async () => {
    try {
      let username = await AsyncStorage.getItem("Username");

      if (username !== null) {
        setUsername(username);
      }
    } catch (error) {
      alert(error);
    }
  };

  useEffect(() => {
    // setInterval(() => {
    load();
    // }, 1000);
  }, []);

  const username2 = username;
  const endpoint = `/users/${username2}/`;
  const getUser = client.get(endpoint);

 
 // console.log(username);

  console.log(getUserApi.data);
  return (

    <Screen style={styles.screen}>

      <>
        <View>
          <View style={styles.header1}>
            {getUserApi.data && (
              <ProfileCard
                name={getUserApi.data.username}
                followers={getUserApi.data.followers}
                following={getUserApi.data.following}
                image={getUserApi.data.image}
              />
            )}
            <AppButtonSmall
              title="Edit Profile"
              onPress={() => navigation.navigate(routes.EDIT_PROFILE)}
            />
          </View>

          <View style={styles.container}>
            <FlatList
              data={menuItems}
              keyExtractor={(menuItem) => menuItem.title}
              ItemSeparatorComponent={ListItemSeparator}
              renderItem={({ item }) => (
                <ListItem
                  title={item.title}
                  IconComponent={
                    <Icon
                      style={{ marginTop: -10 }}
                      name={item.icon.name}
                      backgroundColor={item.icon.backgroundColor}
                    />
                  }
                  onPress={() => navigation.navigate(item.targetScreen)}
                />
              )}
            />
          </View>
        </View>
      </>
    </Screen>
  );
}

功能用户屏幕（道具）{
const navigation=useNavigation（）；
const[username，setUsername]=useState（）；
const load=async（）=>{
试一试{
让username=wait AsyncStorage.getItem（“用户名”）；
如果（用户名！==null）{
setUsername（用户名）；
}
}捕获（错误）{
警报（错误）；
}
};
useffect（（）=>{
//设置间隔（（）=>{
加载（）；
// }, 1000);
}, []);
const username2=用户名；
const endpoint=`/users/${username2}/`；
const getUser=client.get（端点）；
//console.log（用户名）；
log（getUserApi.data）；
返回(
{getUserApi.data&&(
)}
导航.navigate（routes.EDIT_PROFILE）}
/>
menuItem.title}
ItemSeparatorComponent={ListItemSeparator}
renderItem={（{item}）=>(
navigation.navigate（item.targetScreen）}
/>
)}
/>
);
}