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

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

UseEffect API 請求在頁面加載時不顯示

UseEffect API 請求在頁面加載時不顯示

POPMUISE 2023-10-14 18:14:40
如果類似問題已經得到解答,請提前致歉。我已經嘗試了一切,但仍然無法弄清楚為什么我會遇到這個小錯誤。我希望 Firestore 中的推文集合在加載時呈現在頁面上。現在,只有在我發出發布請求后才會發生。這是我的要求useEffect(() => {  const getTweets = async () => {    const tweets = await firestore.collection('tweet').get();    tweets.forEach(doc => {    results.push(doc.data());    })  }  getTweets()}, [])這是我將其映射到頁面的位置:return (    <>      <main className="tweet-container">        <div className="tweet-container--content">          {results.map((tweet, index) => (            <InputResults            key={index}            tweet={tweet}            />            ))}        </div>      </main>    </>  )}
查看完整描述

2 回答

?
吃雞游戲

TA貢獻1829條經驗 獲得超7個贊

嘗試這樣的事情,


import React, {useState, useEffect} from "react";


function App() {

  

    const [results, setResults] = useState([]);


    useEffect(() => {   

      const getTweets = async () => {

        const tweetsData = [];

        const tweets = await firestore.collection('tweet').get();

        tweets.forEach(doc => {

          tweetsData.push(doc.data());

        })

        setResults(tweetsData);

      }

      getTweets()

    }, [])


    return (

      <>

        <main className="tweet-container">

          <div className="tweet-container--content">

            {results.map((tweet, index) => (

                 <h1>{tweet}</h1>

              ))}

          </div>

        </main>

      </>

    )

}

參考: https: //reactjs.org/docs/hooks-state.html


查看完整回答
反對 回復 2023-10-14
?
藍山帝景

TA貢獻1843條經驗 獲得超7個贊

當使用地圖函數在 UI 上顯示元素時,請始終向元素添加關鍵屬性。因為它有助于做出反應以區分元素。


return (

      <>

        <main className="tweet-container">

          <div className="tweet-container--content">

            {results.map((tweet, index) => (

                 <h1 key={index}  >{tweet}</h1>

              ))}

          </div>

        </main>

      </>

    )


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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