英文:
How to get currentUser data from firestore using react
问题
我已经创建了一个简单的注册/身份验证系统，我想从我的Firestore集合中检索已登录用户的详细信息（姓名、个人简介、电子邮件、图像URL），然而，除了"未定义"和"null"之外，我没有取得任何进展。
实际的集合在注册时会填充电子邮件、用户ID、姓名、个人简介和图像URL，我尝试了各种方法来获取数据并显示，但我感到陷入了困境。我是新手使用Firebase，并且在React方面有点生疏，所以感激任何和所有的帮助！
continueSignUp.jsx - 设置用户提供的输入到Firestore
const ContinueSignUp = () => {
const [file, setFile] = useState();
const [url, setURL] = useState();
const [name, setName] = useState('');
let user = firebase.auth().currentUser;
let uid = user.uid;
let email = user.email;
// ... 其他部分不翻译 ...
}
portfolio.jsx - 获取和显示输入
const Portfolio = () => {
const uid = firebase.auth().currentUser.uid;
const currentUserProfile = firebase.firestore().collection("users").doc(uid);
useEffect(() => {
currentUserProfile.get().then((doc) => {
const userName = doc.data().bio;
console.log(uid);
}).catch((err) => {console.log("显示姓名时出错！")})
}, []);
}
我也尝试过 onAuthStateChanged(() => {})，但也没有用。
如果您发现任何其他错误或优化机会，请告诉我，我不会生气的哈哈。
以下是我尝试过的一种方法，它获取所有用户的整个数据集，但我想要获取当前登录的用户的数据。
const [profile, setProfile] = useState(null);
useEffect(() => {
getUserData();
}, []);
useEffect(() => {
console.log(profile);
}, [profile]);
function getUserData() {
const userRef = collection(db, "users");
getDocs(userRef)
.then((response) => {
const user = response.docs.map((doc) => ({
data: doc.data(),
id: doc.id,
}));
console.log(response);
setProfile(user);
})
.catch((error) => console.log(error.message));
}
console.log(profile)：
[{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]
0: {data: {...}, id: '00000000000000000000'}
1: {data: {...}, id: '00000000000000000000'}
2: {data: {...}, id: '00000000000000000000'}
3: {data: {...}, id: '00000000000000000000'}
4: {data: {...}, id: '00000000000000000000'}
5: {data: {...}, id: '00000000000000000000'}
6: {data: {...}, id: '00000000000000000000'}
7: {data: {...}, id: '00000000000000000000'}
8: {data: {...}, id: '00000000000000000000'}
希望这对您有所帮助！
英文:
I've created a simple signup / authentication system and I would like to retrieve the logged in user's details (name, bio, email, imgURL) from my firestore collection, however I've had no luck outside of "undefined" and "null" for the values listed above.
The actual collection does populate with an email, uid, name, bio, imgURL upon signup and I've tried a variety of methods to get the data and display but I feel like I've reached a dead end. I am new to using firebase and am a bit rusty with react so any and all help is appreacited!
continueSignUp.jsx -> sets the user provided inputs in firestore
const ContinueSignUp = () => {
const [file, setFile] = useState();
const [url, setURL] = useState();
const [name, setName] = useState('');
const [bio, setBio] = useState('');
let user = firebase.auth().currentUser;
let uid = user.uid;
let email = user.email;
const hidePlaceholder = url ? { display: "none" } : {};
const navigate = useNavigate();
function handleChange(e) {
if (e.target.files && e.target.files[0]) setFile(e.target.files[0]);
setURL(URL.createObjectURL(e.target.files[0]));
}
async function handleUpload(e) {
e.preventDefault();
const path = `/images/${file.name}`;
const ref = storage.ref(path);
await ref.put(file);
const url = await ref.getDownloadURL();
setURL(url);
setFile(null);
console.log(file);
if (name === "") {
return;
}
const userRef = collection(db, "users");
addDoc(userRef, { name, bio, url, uid, email })
.then((response) => {
console.log(response);
navigate("/portfolio")
})
.catch((error) => console.log(error.message));
}
portfolio.jsx -> Gets and displays the inputs
const Portfolio = () => {
const uid = firebase.auth().currentUser.uid;
const currentUserProfile = firebase.firestore().collection("users").doc(uid);
useEffect(() => {
currentUserProfile.get().then((doc) => {
const userName = doc.data().bio;
console.log(uid);
}).catch((err) => {console.log("Error in displaying Name!")})
}, []);
*actual Document IDs have been replaced by zeros
Ive also tried onAuthStateChanged(()) => {} but no avail there either
*If you find any other mistakes or opportunities for optimization, please let me know, I take no offense lol
Again thank you for any help you can give ~~
Here is one of methods I have tried, this gets the entire collection of data of all the users, however, I want to get the data of only the user that is currently logged in.
const [profile, setProfile] = useState(null);
useEffect(() => {
getUserData();
}, []);
useEffect(() => {
console.log(profile);
}, [profile]);
function getUserData() {
const userRef = collection(db, "users");
getDocs(userRef)
.then((response) => {
const user = response.docs.map((doc) => ({
data: doc.data(),
id: doc.id,
}));
console.log(response);
setProfile(user);
})
.catch((error) => console.log(error.message));
}
console.log(profile) :
[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {data: {…}, id: '00000000000000000000'}
1: {data: {…}, id: '00000000000000000000'}
2: {data: {…}, id: '00000000000000000000'}
3: {data: {…}, id: '00000000000000000000'}
4: {data: {…}, id: '00000000000000000000'}
5: {data: {…}, id: '00000000000000000000'}
6: {data: {…}, id: '00000000000000000000'}
7: {data: {…}, id: '00000000000000000000'}
8: {data: {…}, id: '00000000000000000000'}
答案1
得分: 0
以下是要翻译的内容：
I ended up scrapping all I had and working backwards to figure out a solution and here's what I got
ContinueSignUp.jsx
// 在“users”集合中添加新文档
await setDoc(doc(db, "users", auth.currentUser.uid), {
name: name,
bio: bio
});
这实际上将 uid 设置为 DocID，使检索变得简化了1000倍！
还使用了这里的答案来帮助从 Firestore 显示用户的数据。
英文:
I ended up scrapping all I had and working backwards to figure out a solution and here's what I got
ContinueSignUp.jsx
// Add a new document in collection "users"
await setDoc(doc(db, "users", auth.currentUser.uid ), {
name: name,
bio: bio
});
This is actually setting the uid as the DocID now and making x1000 times easier to retrieve!
Also used the answer here to help display the user's data from firestore.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论