首次加载页面时未定义 firebase 和 nextjs 的 useEffect

Question

我有一个从 firestore 拉入子集合的组件：

import { useEffect, useState } from "react";
import { db } from '../firebase/firebaseInit'
import {useAuth} from '../components/AuthContextProvider'
import { collection, getDocs, setDoc, doc, addDoc } from "firebase/firestore"; 

type Inputs = {
  name: string,
  gender: string,
  date: any,
}

function Subscriptions({ Component, pageProps }: any) {
  const { user  } = useAuth()
  const [kids, setKids] = useState<any>([])

  useEffect(() => {
    const getKids = async (user: any) => {
      if (user) {
        const KidsCollectionRef = collection(doc(collection(db, "users"), user.uid), "kids")
        const data = await getDocs(KidsCollectionRef)
        setKids(data.docs.map((doc) => ({
          ...doc.data(), id: doc.id
        })))
        console.log(kids)
      }
    }
    getKids(user)
  }, [])

  return (
    <>
      <h1>Welcome back</h1>
      {/* need to loop throug the different prices */}
      <div>
        {kids.map((kid, index) => (
          <span key={index} style={{display: 'block', width: '100%'}}>
            {kid.name}
          </span>
        ))}
      </div>
    </>
    )
}

export default Subscriptions

但是，如果我将useEffect更改为此，它只会 console.logs 来自kids的数据：

  useEffect(() => {
    const getKids = async (user: any) => {
      if (user) {
        const KidsCollectionRef = collection(doc(collection(db, "users"), user.uid), "kids")
        const data = await getDocs(KidsCollectionRef)
        setKids(data.docs.map((doc) => ({
          ...doc.data(), id: doc.id
        })))
        console.log(kids)
      }
    }
    getKids(user)
  }, [kids])

这并不理想，因为它会导致无限循环。

这是console.logs：

从firestore获取数据时如何进行useEffect更新？

Answer 1

只需将user.uid添加到 useEffect dep，uid 不会改变，但它可以是未定义的或值，这意味着它只会在值上触发

  useEffect(() => {
    const getKids = async () => {
      if (user) {
        const KidsCollectionRef = collection(doc(collection(db, "users"), user.uid), "kids")
        const data = await getDocs(KidsCollectionRef)
        setKids(data.docs.map((doc) => ({
          ...doc.data(), id: doc.id
        })))
        console.log(kids)
      }
    }
    getKids()
  }, [user?.uid])

Answer 2

如果您想查看新的孩子，您可以在 setKids 中更改 state 之前这样做。

useEffect(() => {
  //... 
  setKids(() => {
    const newState = data.docs.map((doc) => ({...doc.data(), id: doc.id}))
    console.log(newState);
    return newState;
  })
}, []) 

或者只是添加另一个 useEffect

// useEffect with fetch
useEffect(() => { //... }, [])

// useEffect with log
useEffect(() => {
  console.log(kids)
}, [kids])