useEffect 获取 Firebase 数据不起作用

Question

好的，所以我使用 useEffect 来获取 firebase firestore 数据。这是我的钩子代码：

 const [campaign, setCampaigns] = useState([])
useEffect(() => {
    var docRef = db.collection("campaigns").doc(slug);

    docRef.get().then(function(doc) {
      if (doc.exists) {
          console.log("Document data:", doc.data());
              setCampaigns(doc.data()) 
      } else {
          // doc.data() will be undefined in this case
          console.log("No such document!");
      }
  }).catch(function(error) {
      console.log("Error getting document:", error);
  });
  },[]);

 console.log(campaign[0].startDate.seconds) // gives the error stated below
 console.log(campaign.images[0].url)// gives the error stated below

响应是：

我可以访问所有顶级属性，例如 body、campaignPolicy 等，但如果我这样做了

TypeError: 无法读取未定义的属性“秒”

如果我做campaign.startDate.seconds 我得到同样的错误：

TypeError: 无法读取未定义的属性“秒”

完整的最小代码：

const ReviewComponent = (props) => {
  const [open, setOpen] = useState(false)
  const [campaigns, setCampaigns] = useState([])
  const [currentCampaign, setCurrentCampaign] = useState([])

//First useEffect hook
  const tempDoc = []
      useEffect(() => {
        var docRef = db.collection("campaigns");
        docRef.get().then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
            tempDoc.push({ id: doc.id, ...doc.data() })
              // doc.data() is never undefined for query doc snapshots
              setCampaigns(tempDoc)
          });
      })
      .catch(function(error) {
          console.log("Error getting documents: ", error);
      });
      },[]);


//Second use effect hook
      useEffect(() => {
        const docRef = db.collection("campaigns").doc(slug);
    
        docRef.get().then(function(doc) {
            if (doc.exists) {
                console.log("Document data:", doc.data());
                setCurrentCampaign(doc.data()) 
            } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        }).catch(function(error) {
            console.log("Error getting document:", error);
      });
    },[]);


  const handleOpen = () => {
    setOpen(true)
  };

  const handleClose = () => {
    setOpen(false);
  };

  if(currentCampaign[0]) { // Or if(campaign[0])

    console.log(currentCampaign)
  }

  return(
    <Typography>
    {currentCampaign.reviews[0].text}
   </Typography>
)

Answer 1

您正试图在检索数据之前访问您的数据。这是发生了什么：

// 第一次渲染

1. 您将状态设置为空数组
2. 您声明一个带有回调的效果，该回调将在在第一次渲染后调用
3. 您尝试访问一个确实未定义的值（此时您的数组为空）并且您的应用程序崩溃

// 第二次渲染

您的代码在第一次渲染时崩溃，但如果没有：

1. 您的状态现在包含您的数据
2. 你的效果不会被调用，因为你有一个空的依赖数组
3. 您可以使用您的数据

要使您的代码正常工作，并且每次异步加载数据时都应该这样做，就是检查您的数据是否已加载。

const [campaign, setCampaigns] = useState([]);

useEffect(() => {
    const docRef = db.collection("campaigns").doc(slug);

    docRef.get().then(function(doc) {
        if (doc.exists) {
            console.log("Document data:", doc.data());
            setCampaigns(doc.data()) 
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
    }).catch(function(error) {
        console.log("Error getting document:", error);
  });
},[]);

if(campaign.length > 0) { // Or if(campaign[0])
  console.log(campaign[0].startDate.seconds)
  console.log(campaign[0].images[0].url)
}

Answer 2

campaign 的默认值是空数组，它是在 Firebase 商店中设置的。 因此，您应该检查广告系列状态什么是空的或有价值的。

if (campaign.length == 0)
    console.log(campaign[0].startDate.seconds);