I have a RN/Expo app. The user can sign in and push the drawer (hamburger) button, and see their profile information. This info is pulled from an AWS server, but it is really hit or miss as to whether or not the information renders/is displayed. I would like it to display all the time, but that never seems to be a guarantee.
Below is my code:
export function DrawerContent (props){
const [ firstName, getFirstName ] = useState('')
useEffect(() =>{
(async()=>{
const displayName = async () =>{
const real_response = await client_instance.get_user_info() //server function that calls user's info from the AWS server
getFirstName(
<Text style = {styles.title}>
{real_response.first_name} {real_response.last_name}
</Text>
)
}
displayName()
}
)
},
[],
)
... //Inside the return statement on the drawer, where it should be rendered on opening
<View style = {{marginLeft: width*0.021, flexDirection: 'column'}}>
<Title style = {styles.title}>{firstName}</Title>
</View>
EDIT
//This is the final form
const displayName = async () =>{
const real_response = client_instance.get_user_info().then(response=>{
getFirstName(
<Text style = {styles.title}>
{response.first_name} {response.last_name}
</Text>
)
}
)
console.log('response is here', real_response)
}
Edit for Photos:
const [ imageData, getImageData ] = useState(null)
const displayPhoto = async () => {
const real_response = client_instance.download_profile_photo().then(response=>{
getImageData(
response.raw_data
)
console.log('photo is here=>',response )
}
)
}
displayPhoto()
<View>
{imageData && <Avatar.Image source={{uri:`data:image/jpg;base64,${imageData}`}}/>}
</View>
You can resolve the promise returned using then and call the getFirstName method inside.
client_instance.get_user_info().then(response => { // call getFirstName here });
I'm wondering if your function is getting called multiple times and possibly overwriting the previous value obtained by your function. Even if this isn't the case, it's good practice to only bind these server obtained information if real_response is not undefined. You can also remove your unused dependency array.
export function DrawerContent(props) {
const [firstName, getFirstName] = useState("");
useEffect(() => {
async () => {
const displayName = async () => {
try {
const real_response = await client_instance.get_user_info(); //server function that calls user's info from the AWS server
if (real_response) {
getFirstName("");
} else {
console.log("Could not fetch info from server.");
}
} catch (err) {
console.log(`Error occurred fetching from server: ${err.message}`);
}
};
displayName();
};
});
}
While some of these answers helped, the thing that truly fixed this issue was caching the values after the user initially signs in and storing them for future use. Additionally, in case the initial response returns null, the server will keep trying get the data, and won't cache until data has been received.
Here is an example:
User signs up => User signs in => Profile info populated => Data Cached
User signs up => User signs in => Profile info doesn't populate => Server checks again until data retrieved => Data cached