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

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

API 僅在我開始輸入后呈現(Firebase)

API 僅在我開始輸入后呈現(Firebase)

嗶嗶one 2023-10-20 16:25:19
我正在使用 React 和 Firebase 制作一個類似 twitter 的小應用程序,并且遇到了一個小錯誤。現在,我正在使用 UseEffect 在頁面加載時顯示我的 firebase 集合,然后將推文映射到頁面。然而,這些推文只有在我開始打字后才會顯示。這是我撥打電話的方式。    useEffect(() => {        let newArray = []        const getTweets = async () => {            firebase.firestore().collection('tweet').orderBy('date',         'desc').onSnapshot((singleTweet) => {                singleTweet.forEach((element) => {                    newArray.push(element.data())                })            })            showLoader()                        setTweets(newArray)            if (newArray) {                hideLoader()            }        }        getTweets();    }, [])const addTweet = (text) => {    const newTweets = {}    newTweets.content = text;    newTweets.date = new Date().toISOString()    newTweets.userName = user.displayName    newTweets.photoURL = user.photoURL    setTweets([newTweets, ...tweetList])    firebase.firestore().collection('tweet').add(newTweets)}const submitTweetHandler = (event) => {    event.preventDefault()    addTweet(inputText)    setInputText('')}這就是我繪制集合的位置:{tweetList.map((tweet, index) => (<Tweet key={index} tweet={tweet} />))}
查看完整描述

2 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

取決于您可能想要切換到的功能.get


但由于這應該像 @Nooruddin 建議的那樣是異步的,因此您需要有一個.then才能使用集合的快照


嘗試:


useEffect(() => {

  const getTweets = async() => {

    let newArray = []

    await firebase.firestore().collection('tweet').orderBy('date', 'desc').get()

      .then(((snapshot) => {

        snapshot.forEach((singleTweet) => {

          newArray.push(singleTweet.data())

        })

      }))

    showLoader()

    setTweets(newArray)

    if (newArray) {

      hideLoader()

    }

  }

  getTweets();

}, [])


查看完整回答
反對 回復 2023-10-20
?
拉丁的傳說

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

嘗試await像這樣放置異步


useEffect(() => {

        ...

        const getTweets = async () => {

            await firebase.firestore().collection('tweet').orderBy('date',

         'desc').onSnapshot((singleTweet) => {

                ....

            })

            ...

        }

        ...

    }, [])


查看完整回答
反對 回復 2023-10-20
  • 2 回答
  • 0 關注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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