从 Firestore 上的集合中获取所有文档并存储到数组中，然后打印字段

Question

我试图从 firestore 上的集合中获取所有文档并在 h1 标签中显示字段，但是，下面的代码不断获取数据（只应该获取一次）并且内容没有填充到 h1 中。 数据确实存储在主题数组中，但我似乎无法显示数据。

Firestore 连接

export const db = firebase.firestore();

主题文件

  export default function Subjects() {

  const [subjects, setSubjects] = useState([]);

  useEffect(() => {
    async function fetchSubjects(){
      const data = []
      await db.collection("Subjects").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            data.push(doc.data());
        });
      })
      .catch((error) => {
          console.log("Error getting documents: ", error);
      });

      setSubjects(data);
      console.log(subjects);
    }

    fetchSubjects();
  });

  return(
    <>
      {subjects.map(subject =>(
        <h1 key={subject.title}>{subject.title}</h1>
      ))}
    </>
  );

};

在单独的页面中调用主题组件

<Subjects/>

在下面，您可以看到数据不断被获取

Answer 1

我认为它的行为是因为你没有在useEffect传递第二个参数。

您可能要做的是添加[]作为第二个参数，以便仅在第一次渲染时执行useEffect 。

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

而且，您正在使用then和await这可能无法像await期望的那样工作。 因此，在这种情况下，您可能想要删除then部分，或者您可以在then函数中设置状态。

1. 没有异步/等待

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

2. 使用异步/等待

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

        setSubjects(data);
    }

    fetchSubjects();
}, []);