javascript - 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>
    </>
  )
}

太感谢了

标签： javascriptreactjsfirebasegoogle-cloud-firestore

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