Блог

Я пытаюсь получить все документы из коллекции в firestore и отобразить поля в теге h1, однако приведенный ниже код продолжает извлекать данные (предполагалось, что он будет извлечен только один раз), и содержимое не заполняется в h1. Данные действительно сохраняются в массиве объектов, но я, похоже, не могу вывести данные на экран.

Подключение к Firestore

 export const db = firebase.firestore();  

Тематический файл

 export default function Subjects() {   const [subjects, setSubjects] = useState([]);   useEffect(() =gt; {  async function fetchSubjects(){  const data = []  await db.collection("Subjects").get().then((querySnapshot) =gt; {  querySnapshot.forEach((doc) =gt; {  console.log(doc.id, " =gt; ", doc.data());  data.push(doc.data());  });  })  .catch((error) =gt; {  console.log("Error getting documents: ", error);  });   setSubjects(data);  console.log(subjects);  }   fetchSubjects();  });   return(  lt;gt;  {subjects.map(subject =gt;(  lt;h1 key={subject.title}gt;{subject.title}lt;/h1gt;  ))}  lt;/gt;  );  };  

Вызов компонента Темы на отдельной странице

 lt;Subjects/gt;  

Ниже вы можете видеть, что данные продолжают извлекаться

Я думаю, что он ведет себя так потому, что вы не передали второй аргумент useEffect .

Что вы могли бы сделать, так это добавить [] в качестве второго аргумента, чтобы выполнять только useEffect при первом рендеринге.

 useEffect(() =gt; {}, []);  

А также, вы используете then , с await которым может не сработать, как await ожидается, обещание. Поэтому в этом случае вы можете удалить then деталь или установить состояние внутри then функции.

1. Без асинхронности/ожидания

 useEffect(() =gt; {  db.collection('Subjects')  .get()  .then((querySnapshot) =gt; {  const data = [];  querySnapshot.forEach((doc) =gt; {  console.log(doc.id, ' =gt; ', doc.data());  data.push(doc.data());  });  setSubjects(data);  })  .catch((error) =gt; {  console.log('Error getting documents: ', error);  }); }, []);  

2. С асинхронным/ожиданием

 useEffect(() =gt; {  async function fetchSubjects() {  const data = []  const querySnapshot = await db.collection("Subjects").get();  querySnapshot.forEach((doc) =gt; {  console.log(doc.id, " =gt; ", doc.data());  data.push(doc.data());  });   setSubjects(data);  }   fetchSubjects(); }, []);