我怎么能得到docSnap.data()的值，这是内部的getRoomInfo函数到一个变量?我尝试使用useState

Question

import { React, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import "../index.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar1 from "./NavBar1";
import { db } from "../firebase";
import { auth } from "../firebase";
import { useAuthValue } from "../context.js";
import { onAuthStateChanged } from "firebase/auth";
import {
collection,
getDocs,
doc,
updateDoc,
arrayUnion,
getDoc,
} from "firebase/firestore";
const JoinedRooms = () => {
const { currentUser } = useAuthValue();
const [listOfRooms, setListOfRooms] = useState([]);
// console.log(currentUser);
const uid = currentUser.uid;
const getListOfRooms = async () => {
const docRef = doc(db, "Users", uid);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
setListOfRooms(docSnap.data().Chatrooms);
console.log(listOfRooms);
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
};
const getRoomInfo = async ({ id }) => {
const docRef = doc(db, "Rooms", id);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
};
const getRoomInfoHelper = () => {
listOfRooms.map((s) => {
const { id } = s;
getRoomInfo(id);
});
};
export default JoinedRooms;

我尝试使用useState，但它运行到无限循环。我还尝试将值放入var变量，但随后我无法访问jsx内部的值。我不知道如何以及何时调用这个函数，以及何时将值赋给变量。

Answer 1

设置状态是一个异步操作，因此在您console.log(listOfRooms);时它的值还没有设置。有关更多信息，请参阅:

• useState set方法没有立即反映更改

为了防止不断的重新加载，你需要把数据的加载放在useEffect钩子中——这样它只在必要的时候运行，而不是在组件呈现的时候运行。有关更多信息，请参见:

• Firestore数据库无限循环
• React Native + Firestore无限循环，使用hooks