亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將子集合中的數據分配給它的集合并呈現新對象?

如何將子集合中的數據分配給它的集合并呈現新對象?

心有法竹 2023-04-01 15:54:04
我陷入了以下困境,經過大量研究后沒有找到任何答案。我想做的是:簡單地讓用戶通過 react 和 useeffect-hook 從 firestore-DB 中包含他們的圖像并顯示它們。數據庫結構如下所示: https ://i.stack.imgur.com/sDcrv.png所以圖片是用戶集合的子集合。從用戶集合中獲取用戶后,我正在執行第二個請求,使用Object.assign將用戶圖像添加到該特定用戶。在每次 forEach 運行用戶集合后,我將用戶數組設置為setUsers((oldUsers) => [...oldUsers, currentUser]);. 記錄用戶數組顯示使用包括他們的圖像。問題:嘗試渲染圖像時,它們總是未定義。解決方法:按下一個按鈕調用一個函數來重新設置用戶:const reRenderUsers = () => {    if (userDataLoaded === false) {      setUserDataLoaded(true);    }    const copy = [...users];    setUsers(copy);  };^ 這解決了問題和顯示的所有圖像。問題:是否有可能無需“重新渲染”用戶即可立即顯示圖像?例如,我是否使用了 useEffect-hook 錯誤?我感謝任何建議。提前謝謝了!
查看完整描述

1 回答

?
胡說叔叔

TA貢獻1804條經驗 獲得超8個贊

這是因為您在 firebase 響應完成回調鏈之前調用了 setUser。您需要在成功回調內的循環完成后立即更新狀態。我已經更新了 useEffect 以在回調后立即更新它


useEffect(() => {

  const unsubscribe = database.collection("users").onSnapshot((snapshot) => {

    snapshot.forEach((doc) => {

      const currentUser = {

        id: doc.id,

        ...doc.data(),

      };

      database

        .collection("users")

        .doc(currentUser.id)

        .collection("pictures")

        .get()

        .then((response) => {

          const fetchedPictures = [];

          response.forEach((document) => {

            const fetchedPicture = {

              id: document.id,

              ...document.data(),

            };

            fetchedPictures.push(fetchedPicture);

          });

          currentUser.pictures = fetchedPictures;

          setUsers((oldUsers) => [...oldUsers, currentUser]);

        })

        .catch((error) => {

          console.log(error);

        });

      //dont need this here

      //setUsers((oldUsers) => [...oldUsers, currentUser]);

    });

  });


  return () => {

    unsubscribe();

  };

}, []);

祝你好運


查看完整回答
反對 回復 2023-04-01
  • 1 回答
  • 0 關注
  • 108 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號