Javascript firebase详细信息覆盖文本输入

我的代码有点问题。因此，我下面的代码是针对我的react本机应用程序中的用户编辑配置文件页面的。因此，当用户转到页面时，我希望firebase集合中以前输入的firebase详细信息在文本输入中。我下面的代码就是这样做的，但我的问题是，当我尝试添加到代码中时，它不允许我输入字符，然后它就消失了。我相信这是函数getuserinfo，但我不确定还有什么其他的方法来实现它，因为如果我把用户信息异步函数拿走，并把它放在手柄按下，它会删除我编辑它，但handlepress按钮仅适用于保存，因此在我按下保存后，它将显示firebase详细信息，然后我可以编辑，但我必须再次按下保存

我只是想知道如何在不按save键的情况下显示详细信息

谢谢大家!

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

---

因为您正在调用

getUserInfo（）在组件的顶层，它将在每次渲染时被调用

相反，它应该包装在
useffect
中。如果您希望它仅在组件首次装载时运行，那么它可以没有依赖项。因此：

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