Je suis assez nouveau dans le développement en général, donc si je laisse de côté des informations qui auraient pu m'aider, je m'excuse. Je suis en train de créer une application native de réaction à l'aide du service Firestore de Google. J'ai pu faire en sorte que l'authentification fonctionne de manière fiable et j'ai déjà des données stockées dans Firestore qui sont liées au localId créé par l'outil d'authentification de Firebase. Une fois que l'utilisateur s'est connecté, il est redirigé vers le tableau de bord qui finira par extraire les statistiques de l'utilisateur. Cependant, lors de la connexion initiale, ma variable "tableau de bord" renvoie undefined. Si je sauvegarde simplement l'application sans apporter de modifications, elle ne sera alors plus indéfinie. J'ai essayé plusieurs variantes d'utilisation de promesses, de passage à async / wait, et même d'utilisation de setTimeout, mais lors du chargement initial, le "tableau de bord" n'est toujours pas défini. J'ai également essayé de connecter l'utilisateur à la connexion initiale pour voir si je faisais une demande à firebase avec une variable non définie, mais ce n'était pas non plus le cas. Les utilisateurs se connectent 100% du temps. Le code est ci-dessous. S'il vous plaît laissez-moi savoir si des informations supplémentaires pourraient aider.

  const [dashboard, setDashboard] = useState()
useEffect(() => {
    const fetchUserDashboard = () => {
      console.log(user);
      dbh
        .collection(`users`)
        .doc(user)
        .get()
        .then((doc) => {
          setDashboard(doc.data());
        })
        .then(() => {
          setTimeout(() => {
            console.log(dashboard.userName);
          }, 1000);
        });
    };
    fetchUserDashboard();
  }, []);

À la demande de @Doug Stevenson, j'ai modifié le code comme suit, et lors du chargement initial, le tableau de bord n'est toujours pas défini.

const [dashboard, setDashboard] = useState(null)
useEffect(() => {
const fetchUserDashboard = () => {
  console.log(user);
  dbh
    .collection(`users`)
    .doc(user)
    .get()
    .then((doc) => {
      setDashboard(doc.data());
      console.log(dashboard);
    })
    .catch(function (error) {
      console.log('Error getting documents: ', error);
    });
};
fetchUserDashboard();
 }, []);

Le message d'erreur indique simplement :

TypeError: undefined is not an object (evaluating 'dashboard.userName')
0
Andrew Atwood 15 nov. 2020 à 23:41

1 réponse

Meilleure réponse

Lorsque vous appelez setDashboard, cela déclenche le rendu de votre composant dans un très proche avenir. Cela ne fera pas que dashboard contiendra immédiatement une nouvelle valeur. La valeur de dashboard ne change pas pendant la durée de sa portée où sa valeur a été affectée. Vous devez attendre le prochain rendu du composant pour voir la nouvelle valeur du hook useState.

Si vous souhaitez enregistrer immédiatement les résultats de la requête Firestore, vous devrez utiliser la variable qui contient les résultats :

    .then((doc) => {
      setDashboard(doc.data());
      console.log(doc.data());
    })
2
Doug Stevenson 15 nov. 2020 à 21:49