javascript - 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]);
}
};
解决方案
因为您在getUserInfo();
组件的顶层调用,所以每次渲染都会调用它。
相反,它应该被包裹在一个useEffect
. 如果您希望它仅在组件首次挂载时运行,则它可以具有零依赖关系。所以:
useEffect(() => { getUserInfo(); },[])
推荐阅读
- swift - 通过点击 Mapkit 中的 Annotation 触发 NavigationLink
- node.js - Sequelize:使用源中的多个键来包含目标模型
- r - 将数据集转换为在 R 中结合列和行的整洁格式
- powershell - 如何在控制台中关闭语法突出显示?视窗 10 2020
- tensorflow - keras tensorflow metric 总是计算损失
- javascript - Vuejs javascript模块导入“TypeError:不是构造函数”
- r - 条形图中正负条的不同条颜色
- sql - SQL Server - 使用内部查询自联接更新值的代码
- reactjs - 历史和路由器不适用于电子
- r - 在ggplot中绘制多个变量的趋势线和方程