How do I make sure my Profile information is imported every time, using React Native and AWS?-CodePudding

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.photo_data.raw_data)
            }
        )
    }

displayPhoto()

<View>
    {imageData && <Avatar.Image source={{uri:`data:image/jpg;base64,${imageData}`}}/>}
</View>

CodePudding user response：

You can resolve the promise returned using then and call the getFirstName method inside.

 client_instance.get_user_info().then(response => { // call getFirstName here });

CodePudding user response：

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();
    };
  });
}