如何使用 React Native 和 AWS 确保每次都导入我的个人资料信息？

Question

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>

Answer 1

您可以使用then解析返回的承诺并调用内部的getFirstName方法。

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

Answer 2

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

Answer 3

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