![](/img/trans.png)
[英]I am trying to delete some data from firestore but there is a problem (react)
[英]Im new to react and I am having a ton of issues trying to get data fields from firestore to show up on the screen on my app
我将包括照片以及我的代码。 我不知道我做错了什么,但我希望能够在他们的个人资料页面上打印当前用户的姓名,如图所示。 非常感谢! 似乎永远无法访问快照以尝试将字段检索到可以使用的位置。 我已经坚持了一个星期,不知道还能尝试什么。 我觉得这是我遗漏的一个简单修复,但无法确定它是什么。
火店图片
应用图片
import 'react-native-gesture-handler';
import auth, {firebase} from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
//import * as React from 'react';
import React, {useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {
StyleSheet,
Picker,
SafeAreaView,
Text,
View,
TextInput,
TouchableOpacity,
Button,
} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {ScrollView} from 'react-native-gesture-handler';
const Profile = ({navigation}) => {
const [firstName, setFname] = useState('');
const [lastName, setLname] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [age, setAge] = useState('');
const [sex, setSex] = useState('');
const [id, setId] = useState('');
getUserInfo = async () => {
firebase
.firestore()
.collection('users')
.doc(firebase.auth().currentUser.uid)
.onSnapshot((docs) => {
setFname(docs.data().firstName);
console.log(firstName);
setLname({lastName: docs.data().lastName});
setEmail({email: docs.data().email});
setPassword({password: docs.data().password});
setAge({age: docs.data().age});
setSex({sex: docs.data().sex});
setId({id: docs.data().id});
});
};
const db = firebase.firestore();
var user = firebase.auth().currentUser;
var usersEmail = user.email;
var userID = firebase.auth().currentUser.uid;
db.collection('users')
.where('email', '==', usersEmail)
.get()
.then(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, ' => ', doc.data());
var data = doc.data();
const fn = doc.get('firstName');
setFname({firstName: fn});
console.log(firstName);
console.log(data);
setFname(data.firstName);
//var lastName = data.lastName;
//var firstName = doc.get("first");
//var lastName = doc.get("last");
});
})
.catch(function (error) {
console.log('Error getting documents: ', error);
});
return (
<SafeAreaView style={styles.container2}>
<ScrollView>
<View style={styles.container}>
<Text style={styles.logo}>Profile</Text>
<Text style={styles.Info}>
Name: {firstName} {lastName}
</Text>
<Text style={styles.Info}>Email: {usersEmail}</Text>
<Text style={styles.Info}>Age: </Text>
<Text style={styles.Info}>Sex:</Text>
<Text style={styles.Info}>Sports:</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('EditProfile')}>
<Text style={styles.buttonText}>Edit Profile</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('Messages')}>
<Text style={styles.buttonText}>My Messages</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#2c9f45',
alignItems: 'center',
justifyContent: 'center',
},
container2: {
flex: 1,
backgroundColor: '#2c9f45',
justifyContent: 'center',
},
button: {
width: '85%',
backgroundColor: '#263844',
borderRadius: 25,
height: 54,
alignItems: 'center',
justifyContent: 'center',
marginTop: 15,
marginBottom: 15,
},
buttonText: {
color: 'white',
fontSize: 20,
},
logo: {
fontWeight: 'bold',
fontSize: 54,
color: '#263844',
marginBottom: 20,
},
Info: {
fontWeight: 'bold',
fontSize: 22,
color: '#263844',
marginBottom: 20,
},
});
export default Profile;
在返回结果之前,所有这些都得到渲染,您需要包含useEffect
并从 useEffect 函数内部运行您的 firebase。
这是一个相当不错的博客,将有助于理解钩子。
像这样的东西(未经测试);
import 'react-native-gesture-handler';
import auth, {firebase} from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
//import * as React from 'react';
import React, {useEffect, useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {
StyleSheet,
Picker,
SafeAreaView,
Text,
View,
TextInput,
TouchableOpacity,
Button,
} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {ScrollView} from 'react-native-gesture-handler';
const Profile = ({navigation}) => {
const [firstName, setFname] = useState('');
// const db = firebase.firestore();
// const { email } = firebase.auth().currentUser;
const email = ‘Sprint3@test.com’;
useEffect( () => {
db.collection('users')
.where('email', '==', usersEmail)
.get()
.then(function (querySnapshot) {
// This will step over every doc that has that email, you should limit it one and organise by an updated field. .limit(1)
querySnapshot.forEach(function (doc) {
const fn = doc.get('firstName');
setFname(fn);
// Add whatever states from the data you need or just one object with all the info in.
});
})
.catch(function (error) {
console.log('Error getting documents: ', error);
});
}, []);
return (
<SafeAreaView style={styles.container2}>
<ScrollView>
<View style={styles.container}>
<Text style={styles.logo}>Profile</Text>
<Text style={styles.Info}>
Name: {firstName}
</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('EditProfile')}>
<Text style={styles.buttonText}>Edit Profile</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('Messages')}>
<Text style={styles.buttonText}>My Messages</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#2c9f45',
alignItems: 'center',
justifyContent: 'center',
},
container2: {
flex: 1,
backgroundColor: '#2c9f45',
justifyContent: 'center',
},
button: {
width: '85%',
backgroundColor: '#263844',
borderRadius: 25,
height: 54,
alignItems: 'center',
justifyContent: 'center',
marginTop: 15,
marginBottom: 15,
},
buttonText: {
color: 'white',
fontSize: 20,
},
logo: {
fontWeight: 'bold',
fontSize: 54,
color: '#263844',
marginBottom: 20,
},
Info: {
fontWeight: 'bold',
fontSize: 22,
color: '#263844',
marginBottom: 20,
},
});
export default Profile;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.