Блог

Вот мой код:

 import firebase from "../Firebase.js";  import {ThemeProvider} from "@mui/material";  import Post from "../components/posts/Post";  const firestore = firebase.firestore();  function AllPostsPage(props) {   const posts = firestore.collection("posts");   function myFunc() {  posts.get().then((result) =gt; {  result.docs.forEach((post) =gt; {  console.log(post.data().poster);  })  })  }    return (   lt;ThemeProvider theme={props.theme}gt;   {posts.get().then((result) =gt; {  result.docs.map((post, index) =gt; {  return lt;Post theme={props.theme} key={index} title={post.data().title} desc={post.data().desc} poster={post.data().poster} imgUrl={post.data().imgUrl} comments={post.data().comments} /gt;  })  })}   lt;/ThemeProvidergt;   );  }  export default AllPostsPage;  

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

Вы должны убрать свою асинхронную логику из инструкции return. Вы получаете данные из api здесь и используете здесь функцию then (), которая является асинхронной логикой.

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

Сначала вы импортируете крючки:

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

Затем определите состояние в AllPostsPage:

 const [postsData, setPostsData] = useState([]);  

Затем запишите свою асинхронную логику в функцию и вызовите ее в useEffect:

 const getPosts = async () =gt; {  try {  const response = await posts.get();  setPostsData(response.data.data);  } catch(e) { console.log(e);} }  useEffect(() =gt; {  getPosts(); }, []}  

И, наконец, используйте свое состояние для отображения в инструкции return. Что-то подобное происходит между тегами Provider:

 {postsData.docs.map((post, index) =gt; (  lt;Post theme={props.theme} key={index} title={post.data().title} desc=   {post.data().desc} poster={post.data().poster} imgUrl={post.data().imgUrl}   comments={post.data().comments}   /gt; )}