無法顯示來自 firebase firestore 和反應 js 的圖像

Question

我有一個從firestore獲取數據庫的應用程序，並且圖像保存在firestorage上，我的應用程序工作得很好，但是圖像顯示為未定義，經過大量不同的試驗后，我注意到圖像加載了，然后有東西將其清除，不確定我的代碼中缺少什么。

從 Firestore 和 Firestorage 檢索數據的代碼

  useEffect(() => {
    const getList = async () => {
      const data = await getDocs(query(edu_Collection, orderBy('date', 'desc')))
      setEducationList(
        data.docs.map(doc  =>
        {
          let data = {
            id: doc.id, 
            name: doc.data().name, 
            location: doc.data().location, 
            image: doc.data().image, 
            date: doc.data().date.toDate()
          } as Education;
          
          const reference = ref(storage, data.image)
          getDownloadURL(reference)
          .then(url => { data.fullPath = url; setLoaded(true); console.log(url) })
          .catch(err => console.error(err))

          
          return data
        })
      )
    }
    getList()

  }, [])

渲染部分

    <Row>
      {educationList.map((item: Education) => (
        <Col key={item.id} xs={4}>
          <Card>
          <div className={styles.CardImageContainer}>
            <Card.Img 
              className={styles.CardImage} 
              variant="top" 
              src={item.fullPath} />
          </div>
          <Card.Body>
            <Card.Title>{item.name}</Card.Title>
            <Card.Text>
              {item.location}
            </Card.Text>
            <CustomDate date={item.date} />
          </Card.Body>
          </Card>
        </Col>
      ))}
    </Row>

Answer 1

問題可能是因為您混淆了 promise 和異步等待的方式。 請嘗試我的解決方案

  useEffect(() => {
    const getList = async () => {
      const data = await getDocs(query(edu_Collection, orderBy('date', 'desc')));
      const educations = [];

      for (let index = 0; index < data.docs.length; index++) {
        const doc = data.docs[index];
        let data = {
          id: doc.id, 
          name: doc.data().name, 
          location: doc.data().location, 
          image: doc.data().image, 
          date: doc.data().date.toDate()
        } as Education;

        const reference = ref(storage, data.image);
        data.fullPath =await getDownloadURL(reference);

        educations.push(data);
      }

      setEducationList(educations);
    };

    getList()
  }, [])