API 仅在我开始输入后呈现（Firebase）

Question

我正在使用 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} />))}

Answer 1

取决于您可能想要切换到的功能.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();}, [])

Answer 2

尝试await像这样放置异步useEffect(() => {        ...        const getTweets = async () => {            await firebase.firestore().collection('tweet').orderBy('date',         'desc').onSnapshot((singleTweet) => {                ....            })            ...        }        ...    }, [])