#User.uid is null even though user is logged in and when I log it to the console it returns the id

49 messages · Page 1 of 1 (latest)

pallid brook
# 
const [user] = useAuthState(auth);
  const [ChatList, setChatList] = useState([]);
  useEffect(() => {
    const ChatCollectionRef = collection(db, "ChatList");
    const queryChat = query(
      ChatCollectionRef,
      where("usernames", "array-contains", user.displayName),
      orderBy("createdAt")
    );
    const unsuscribe = onSnapshot(queryChat, (snapshot) => {
      let chat = [];
      snapshot.forEach((doc) => {
        chat.push({ ...doc.data(), id: doc.id });
      });
      setChatList(chat);
    });
    return () => unsuscribe();
  }, []);
mellow geyser
#

Not sure we have enough to go on here. Where are you logging these values? I only see user.displayName in use in this code. If user starts off without a value, then your useEffect will retain that as a stale closure since your dependency is missing. Honestly could be anything though, hard to pin point with such a small example.

pallid brook
#

it's actually like this

# 
import React from "react";
import { db, auth } from "../firebase";
import {
  collection,
  addDoc,
  serverTimestamp,
  where,
  getDocs,
  query,
  onSnapshot,
  orderBy,
} from "firebase/firestore";
import { Link } from "react-router-dom";
import { useAuthState } from "react-firebase-hooks/auth";
import { useState, useEffect } from "react";

const Inbox = () => {
  const [user] = useAuthState(auth);
  const [ChatList, setChatList] = useState([]);

  useEffect(() => {
    const ChatCollectionRef = collection(db, "ChatList");
    const queryChat = query(
      ChatCollectionRef,
      where("users", "array-contains", user.uid)
    );

    const unsuscribe = onSnapshot(queryChat, (snapshot) => {
      let chats = [];
      snapshot.forEach((doc) => {
        chats.push({ ...doc.data(), id: doc.id });
      });
      setChatList(chats);
    });

    return () => unsuscribe();
  }, []);

  console.log(ChatList);
  return <div>{ChatList}</div>;
};

export default Inbox;
#

if I add user?.id it says cant send undefined value to firebase

pallid brook
mellow geyser
# 
  const [user] = useAuthState(auth);
  const [ChatList, setChatList] = useState([]);

console.log(user);

What do you get on your renders like this? Does it start undefined and then get a value after a render or two?

pallid brook
#

Let me try

#

I got this @mellow geyser

mellow geyser
#

so never undefined? can you show the whole object there?

pallid brook
#

Yeah

#

Like this right?

mellow geyser
#

yeah

pallid brook
#

Should I use this outside of useEffect and put it on an onClick?

#

Or is there a way to get it working

mellow geyser
#

So where are you using user.uid?

#

nm I see it

pallid brook
#

Yeaj

#

This is the document

mellow geyser
#

but the value is null there?

pallid brook
pallid brook
mellow geyser
# 
  useEffect(() => {
    console.log(user);
    const ChatCollectionRef = collection(db, "ChatList");
    const queryChat = query(
      ChatCollectionRef,
      where("users", "array-contains", user.uid)
    );

    const unsuscribe = onSnapshot(queryChat, (snapshot) => {
      let chats = [];
      snapshot.forEach((doc) => {
        chats.push({ ...doc.data(), id: doc.id });
      });
      setChatList(chats);
    });

    return () => unsuscribe();
  }, [])

Can you remove the other user log and try this one?

#

and show me?

pallid brook
mellow geyser
#

that is with this?

  useEffect(() => {
    console.log(user);
#

?

pallid brook
#

I removed it

#

In the useEffect is is null

#

Outside it, it is working fine

mellow geyser
#

OK what if you do

useEffect(() => {
    if(!user) return;
    const ChatCollectionRef = collection(db, "ChatList");
    const queryChat = query(
      ChatCollectionRef,
      where("users", "array-contains", user.uid)
    );

    const unsuscribe = onSnapshot(queryChat, (snapshot) => {
      let chats = [];
      snapshot.forEach((doc) => {
        chats.push({ ...doc.data(), id: doc.id });
      });
      setChatList(chats);
    });

    return () => unsuscribe();
  }, [user])
pallid brook
#

Now it works

#

Thank you so much

#

Also a quick question

mellow geyser
#

yeas i expect its your initial value and the stale closure

pallid brook
#

Why does react log it 2 times?

mellow geyser
#

Because with Strict mode enabled they are running effects twice

#

and this is good

#

because it will find bugs due to poor cleanup

pallid brook
#

Oh

#

okay

#

Thank you very much

dense tapir
mellow geyser
#

Yeah or even better. Skip Firebase completely.