在 firebase 中注册后用户数组未定义

Question

I have problem with gettin array during login after creating account.

When a user creates an account an entry is also created in users collection with array called Tickets which is empty.

I using this code to do this

const createUserDocument = async (user) => {
  if (!user) return;
  const userRef = firestore.doc(`users/${user.uid}`);
  const snapshot = await userRef.get();
  if (!snapshot.exists) {
    const { email, displayName } = user;
    userRef.set({
      email: email,
      name: displayName,
      tickets: [],
      admin: false,
    });
  }
};

In my component i want show user tasks so here's my component.

import { useState, useEffect, useContext } from "react";
import { firestore } from "services/firebase";
import { UserContext } from "providers/UserProvier";

// Components
import Modal from "components/Modal/Modal";
import AddNewItem from "components/AddNewItem/AddNewItem";

const TicketsView = () => {
  const [visible, setVisible] = useState(false);
  const [tickets, setTickets] = useState([]);

  const { uid } = useContext(UserContext);

  useEffect(() => {
    GetUserTickets(uid);
  }, [uid]);

  const GetUserTickets = (uid) => {
    firestore
      .collection("users")
      .doc(uid)
      .onSnapshot((snap) => {
        const newTickets = [];
        snap.data().tickets.map((ticket) => newTickets.push(ticket));
        setTickets(newTickets);
      });
  };

  const ShowModal = () => {
    setVisible(!visible);
  };

  return (
    <>
      <AddNewItem ShowModal={ShowModal} />
      <Modal visible={visible} ShowModal={ShowModal} />
      <h2>hello</h2>
    </>
  );
};

export default TicketsView;

I don't know why useEffect execute two times.

In first execution snap.data() is undefined and second exection i see info from user doc.

Answer 1

I have problem with gettin array during login after creating account.

When a user creates an account an entry is also created in users collection with array called Tickets which is empty.

I using this code to do this

const createUserDocument = async (user) => {
  if (!user) return;
  const userRef = firestore.doc(`users/${user.uid}`);
  const snapshot = await userRef.get();
  if (!snapshot.exists) {
    const { email, displayName } = user;
    userRef.set({
      email: email,
      name: displayName,
      tickets: [],
      admin: false,
    });
  }
};

In my component i want show user tasks so here's my component.

import { useState, useEffect, useContext } from "react";
import { firestore } from "services/firebase";
import { UserContext } from "providers/UserProvier";

// Components
import Modal from "components/Modal/Modal";
import AddNewItem from "components/AddNewItem/AddNewItem";

const TicketsView = () => {
  const [visible, setVisible] = useState(false);
  const [tickets, setTickets] = useState([]);

  const { uid } = useContext(UserContext);

  useEffect(() => {
    GetUserTickets(uid);
  }, [uid]);

  const GetUserTickets = (uid) => {
    firestore
      .collection("users")
      .doc(uid)
      .onSnapshot((snap) => {
        const newTickets = [];
        snap.data().tickets.map((ticket) => newTickets.push(ticket));
        setTickets(newTickets);
      });
  };

  const ShowModal = () => {
    setVisible(!visible);
  };

  return (
    <>
      <AddNewItem ShowModal={ShowModal} />
      <Modal visible={visible} ShowModal={ShowModal} />
      <h2>hello</h2>
    </>
  );
};

export default TicketsView;

I don't know why useEffect execute two times.

In first execution snap.data() is undefined and second exection i see info from user doc.