Блог

Заранее извиняюсь, если на подобные вопросы, подобные этому, уже были даны ответы. Я перепробовал все, но до сих пор не могу понять, почему я испытываю эту небольшую ошибку. Я хочу, чтобы эта коллекция твитов из моего Firestore отображалась на странице при ее загрузке. Прямо сейчас это происходит только после того, как я делаю запрос post.

Это мой запрос

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

Большое вам спасибо

Попробуйте что-то вроде этого,

 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

Всегда добавляйте ключевое свойство к элементам при использовании функции отображения, чтобы показать их в пользовательском интерфейсе. Поскольку это помогло бы react различать элементы.

 return (
      <>
        <main className="tweet-container">
          <div className="tweet-container--content">
            {results.map((tweet, index) => (
                 <h1 key={index}  >{tweet}</h1>
              ))}
          </div>
        </main>
      </>
    )