首页 > 解决方案 > firebase 详细信息覆盖文本输入反应本机博览会

问题描述

我的代码有点问题。所以我下面的代码是用于我的反应本机应用程序中的用户编辑个人资料页面。因此,当用户转到该页面时,我希望先前输入的来自 firebase 集合的 firebase 详细信息出现在文本输入中。我下面的代码为我做了这个,但我的问题是,当我尝试添加它不会让我的代码时,它让我输入一个字符然后它消失了。我相信它的功能 getuserinfo 但我不确定还有什么其他方法来实现它,因为如果我把那个用户信息异步功能拿走并将它放在手柄按下然后它让我编辑它,但手柄按下按钮只适用于保存所以它会在我按下保存后显示firebase详细信息,然后我可以编辑,但我必须再次按下保存。

我只想弄清楚如何在不按保存的情况下显示详细信息。

谢谢!

export default function SignUp({ navigation }) {
    let currentUserUID = firebase.auth().currentUser.uid;
    const [fullname, setFullName] = useState('');
    const [bio, setBio] = useState('');
    const [studentCode, setCode] = useState('');
    const [location, setLocation] = useState('');
    const [dayofbirth, setDOB] = useState('');
    const [link, setLink] = useState('');
    const [image, setImage] = useState(null); // for profile pic
    
  

  
      async function getUserInfo(){
        const currentUser = firebase.auth().currentUser;
        let doc = await firebase
        .firestore()
        .collection('userProfile')
        .doc(currentUserUID)
        .get();
       
     
        
  
     
          let dataObj = doc.data();
          setFullName(dataObj.firstName);
          setCode(dataObj.code);
       
          setBio(dataObj.bio);
          setLocation(dataObj.location);
          setDOB(dataObj.dayofbirth);
          setLink(dataObj.link);
          setImage(dataObj.image);
          
          
        
      }
      getUserInfo(); // calls this function
  
    
      useEffect(() => { // works for just for IOS
        (async () => {
          if (Platform.OS !== 'web') {
            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
            if (status !== 'granted') {
              alert('Sorry, we need camera roll permissions to make this work!');
            }
          }
        })();
      }, []);

      const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.All,
          allowsEditing: true,
          aspect: [4, 3],
          quality: 1,
        });
    
        console.log(result);
    
        if (!result.cancelled) {
          setImage(result.uri);
        }
      };

      const emptyState = () => {
        setFullName('');      
        setCode('');
        setBio('')
       
      };
  
  

    const handlePress = async () => {
      const doc = await firebase
      .firestore()
      .collection('userProfile')
      .doc(currentUserUID)
      .get();

    
     
        const currentUser = firebase.auth().currentUser;

      
          let dataObj = doc.data();
          setFullName(dataObj.firstName);
          setCode(dataObj.code);
          setLocation(dataObj.location);
          setBio(dataObj.bio);
          setDOB(dataObj.dayofbirth);
          setLink(dataObj.link);
          setImage(dataObj.image);
      
        if (!fullname && !bio && !studentCode) {
          setFullName(doc.data().firstName);
          setBio(doc.data().bio);
          setCode(doc.data().code);
          setImage(doc.data().image);
        } else if (!fullname && !bio) {
          setBio(doc.data().bio);
          setFullName(doc.data().firstName);
        } else if(!studentCode && !bio){
          setCode(doc.data().code);
          setBio(doc.data().bio);

        } else if (!studentCode) {
            setCode(doc.data().code)
        } else if(!fullname){
          setFullName(doc.data().firstName);
         
        } else if(!image){
          setImage(doc.data().image);
        }
        else if(!dayofbirth) {
          setDOB(doc.data().dayofbirth)
        }
        else if(!bio){
         
          setBio(doc.data().bio);

        } else {
          registration(
            bio,
            fullname,
            studentCode,
            location,
            dayofbirth,
            link,
            image
          );
          navigation.navigate('Loading');
          emptyState();
        
    
    
        }
        function useAsync(asyncFn, onSuccess) {
          useEffect(() => {
            let isMounted = true;
            asyncFn().then(data => {
              if (isMounted) onSuccess(data);
            });
            return () => { isMounted = false };
          }, [asyncFn, onSuccess]);
        }
        
      };

标签: javascriptfirebasereact-nativegoogle-cloud-firestoreexpo

解决方案


因为您在getUserInfo();组件的顶层调用,所以每次渲染都会调用它。

相反,它应该被包裹在一个useEffect. 如果您希望它仅在组件首次挂载时运行,则它可以具有零依赖关系。所以:

useEffect(() => { getUserInfo(); },[])

推荐阅读