import { getDocs, collection, query, doc, addDoc } from "firebase/firestore/lite"; import { useState } from "react"; import { db } from "../firebaseConfig"; import { useEffect } from "react"; function EndGame(startGame){ const {startGameHandler} = startGame; const startGameClick = startGameHandler[0]; const time = startGameHandler[1]; const [leaderboard, setLeaderboard] = useState([]); const [user, setUser] = useState(""); const [username, setUsername] = useState("") const [isAnonymous, setIsAnonymous] = useState(false); const loginAnonymously = () =>{ console.log("login hivas ", user) setUser(username) setIsAnonymous(true) } const setScore= async(timeprop, userprop)=>{ console.log(time, user) await addDoc(doc(db, "Leaderboard"), { name: userprop, time: timeprop, }) } async function getLeaderboard(){ const q = query(collection(db, "Leaderboard")); const chacSnapShot = await getDocs(q); const char = chacSnapShot.docs.map(doc => doc.data()); setLeaderboard(char) } useEffect(()=>{ setScore(time, user) getLeaderboard() }, [isAnonymous]) return( <div className={`endgame-page`}> {!isAnonymous && ( <div className="endgame-div"> <input type="text" placeholder="Enter a username" value={username} onChange={e => setUsername(e.target.value)} /> <button onClick={loginAnonymously}>Login Anonymously</button> </div> )} {isAnonymous && ( <div className="endgame-div"> <h1 className="endgame-heading">Leaderboard</h1> <div className="endgame-leaderboard"> {leaderboard.map((data)=>{ return( <div key={data.name} className="user-container"> <p className="username">{data.name}</p> <p className="userdata">{data.time}</p> </div> ) })} </div> <button className="endgame-button" onClick={startGameClick} >Start Game</button> </div> )} </div> ) } export default EndGame
J'ai donc ce composant de fin de partie et lors du rendu, pour une raison quelconque, la fonction setScore est appelée et je pense que c'est pourquoi j'obtiens l'erreur suivante?:
Uncaught (promis) FirebaseError?: référence de document invalide. Les références aux documents doivent avoir un nombre pair de segments, mais les classements en ont 1.
Sur la ligne 27. Ai-je tort de penser que c'est parce que setScore est appelé lors du rendu ? Si non, quel est le problème/la solution??
Dans Firebase, j'ai une collection Leaderboard et je souhaite créer des documents à partir de l'heure et du nom des utilisateurs (il devrait y avoir 1 document par utilisateur)
Méthode addDoc
應(yīng)該使用集合引用而不是文檔引用。只有在想要指定文檔名稱(chēng)時(shí)才會(huì)使用文檔引用,此時(shí)應(yīng)使用 setDoc
, veuillez vous référer à l'exemple de code ci-dessous?:
const setScore= async(timeprop, userprop)=>{ console.log(time, user) await setDoc(doc(db, "Leaderboard", "<document-name>"), { name: userprop, time: timeprop, }) }
Pour corriger ce problème, consultez l'exemple de code ci-dessous?:
const setScore= async(timeprop, userprop)=>{ console.log(time, user) await addDoc(collection(db, "Leaderboard"), { name: userprop, time: timeprop, }) }
Vous pouvez consulter cette Documentation pour plus d'informations.