get current users data from firestore on reactjs using uid as a link between the user auth and fires-CodePudding

i am trying to get user data from firestore using uid to link the firestore data and the user auth. i have tried this but keep getting a blank screen with too many re-renders errors. would anyone be able to help? my firestore collection is named values and it stores Fname,Lname, bio, username and uid

import {
 StyleSheet,
 Text,
 View,
 Image,
} from 'react-native';
import { auth, db } from '../Firebase'


const  UserProfileView = () => {

   const [user, setUser] = useState();
   const {uid} = auth.currentUser.uid;

 
   
     const userRef = db.collection('values').doc(uid);
     const doc =  userRef.get();
     doc.data;
     
   const userData = doc.data;
   setUser(userData);
 


// Get user on mount
useEffect(() => {
   UserProfileView();
}, []);

//adapted from https://www.bootdey.com/react-native-snippet/12/User-profile-with-options

My return the only code that relates to the above is the text tag with user && user?.Fname

    return (
      <View style={styles.container}>
          <View style={styles.header}>
            <View style={styles.headerContent}>
                <Image style={styles.avatar}
                  source={{uri: 'https://bootdey.com/img/Content/avatar/avatar6.png'}}/>

                <Text style={styles.name}>{auth.currentUser?.uid} </Text>
                <Text style={styles.name}>{user && user?.Fname}</Text>
                <Text style={styles.userInfo}>{auth.currentUser?.email}</Text>
                <Text style={styles.userInfo}>Florida </Text>
            </View>
          </View>

          <View style={styles.body}>
            <View style={styles.item}>
              <View style={styles.iconContent}>
                <Image style={styles.icon} source={{uri: 'https://img.icons8.com/color/70/000000/cottage.png'}}/>
              </View>
              <View style={styles.infoContent}>
                <Text style={styles.info}>Home</Text>
              </View>
            </View>

            <View style={styles.item}>
              <View style={styles.iconContent}>
                <Image style={styles.icon} source={{uri: 'https://img.icons8.com/color/70/000000/administrator-male.png'}}/>
              </View>
              <View style={styles.infoContent}>
                <Text style={styles.info}>Settings</Text>
              </View>
            </View>

            <View style={styles.item}>
              <View style={styles.iconContent}>
                <Image style={styles.icon} source={{uri: 'https://img.icons8.com/color/70/000000/filled-like.png'}}/>
              </View>
              <View style={styles.infoContent}>
                <Text style={styles.info}>News</Text>
              </View>
            </View>

            <View style={styles.item}>
              <View style={styles.iconContent}>
                <Image style={styles.icon} source={{uri: 'https://img.icons8.com/color/70/000000/facebook-like.png'}}/>
              </View>
              <View style={styles.infoContent}>
                <Text style={styles.info}>Shop</Text>
              </View>
            </View>

          </View>
      </View>
    );
  }
export default UserProfileView;```

CodePudding user response：

DocumentSnapshot.data() is a method, not a property, so:

const userData = doc.data;

Should actually be:

const userData = doc.data();

CodePudding user response：

Your code is recursive, you're defining UserProfileView functional component and calling it itself inside the UseEffect hook.

Refactor code as below:


import { StyleSheet, Text, View, Image } from "react-native";
import { auth, db } from "../Firebase";

const UserProfileView = () => {
  const [user, setUser] = useState(null);

  const fetchUserInfo = async () => {
    const { uid } = auth().currentUser;
    // Discard fetch when user ID not defined
    if (!uid) return;
    const userRef = db.collection("values").doc(uid);
    const doc = await userRef.get();
    const userData = doc.data();
    setUser(userData);
  };

  // Get user on mount
  useEffect(() => {
    fetchUserInfo();
  }, []);

  if (!user) return null;

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.headerContent}>
          <Image
            style={styles.avatar}
            source={{
              uri: "https://bootdey.com/img/Content/avatar/avatar6.png",
            }}
          />

          <Text style={styles.name}>{auth.currentUser?.uid} </Text>
          <Text style={styles.name}>{user && user?.Fname}</Text>
          <Text style={styles.userInfo}>{auth.currentUser?.email}</Text>
          <Text style={styles.userInfo}>Florida </Text>
        </View>
      </View>

      <View style={styles.body}>
        <View style={styles.item}>
          <View style={styles.iconContent}>
            <Image
              style={styles.icon}
              source={{
                uri: "https://img.icons8.com/color/70/000000/cottage.png",
              }}
            />
          </View>
          <View style={styles.infoContent}>
            <Text style={styles.info}>Home</Text>
          </View>
        </View>

        <View style={styles.item}>
          <View style={styles.iconContent}>
            <Image
              style={styles.icon}
              source={{
                uri: "https://img.icons8.com/color/70/000000/administrator-male.png",
              }}
            />
          </View>
          <View style={styles.infoContent}>
            <Text style={styles.info}>Settings</Text>
          </View>
        </View>

        <View style={styles.item}>
          <View style={styles.iconContent}>
            <Image
              style={styles.icon}
              source={{
                uri: "https://img.icons8.com/color/70/000000/filled-like.png",
              }}
            />
          </View>
          <View style={styles.infoContent}>
            <Text style={styles.info}>News</Text>
          </View>
        </View>

        <View style={styles.item}>
          <View style={styles.iconContent}>
            <Image
              style={styles.icon}
              source={{
                uri: "https://img.icons8.com/color/70/000000/facebook-like.png",
              }}
            />
          </View>
          <View style={styles.infoContent}>
            <Text style={styles.info}>Shop</Text>
          </View>
        </View>
      </View>
    </View>
  );
};
export default UserProfileView;