UseEffect API 请求在页面加载时不显示

Question

如果类似问题已经得到解答，请提前致歉。我已经尝试了一切，但仍然无法弄清楚为什么我会遇到这个小错误。我希望 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>    </>  )}

Answer 1

尝试这样的事情，

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

Answer 2

当使用地图函数在 UI 上显示元素时，请始终向元素添加关键属性。因为它有助于做出反应以区分元素。

return (

      <>

        <main className="tweet-container">

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

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

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

              ))}

          </div>

        </main>

      </>

    )