firebase 如何使用react Js和Firestore查询集合中的当前ID以仅显示具有相似字段和值的文档-第2部分

s5a0g9ez  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(133)

我的目标是获取所有包含相同值的字段的文档。我第一次运行应用程序时,它会显示集合中所有文档的所有相似值,对应于当前ID,代码如下:-

const [data, setData] = useState([]);
    const [dataSet, setDataSet] = useState({
        regNo: "",
    });

    const {userId}  = useParams();
    let id = userId

    useEffect(() => {
        let getUserDoc = async (id) => {
          let docRef = doc(db, `dentist/${id}`);
          let docSnap = await getDoc(docRef);
          console.log('getUserDoc() received:', docSnap);
          if (docSnap.exists) {
            let theData = docSnap.data();
            console.log('getUserDoc() setting userInfo:', theData);
            setDataSet(theData);
          }
        }
      
        if (id) {
          getUserDoc(id);
          console.log("IdUser", id)
        } else {
          console.log('useEffect() -- no ID value');
        }
      }, [id]);
   
      let currentValue = dataSet.regNo
      console.log("currentvalue from doc", currentValue)

    useEffect(()=>{
        const getList = async () => {
            const collectionRef = collection(db, "dentist")
          const q = query(collectionRef, where("regNo", "==", currentValue))
          await getDocs(q).then((task)=>{
           let medData = task.docs.map((doc) => ({...doc.data(),
          id: doc.id}))
          setData(medData)
          console.log("medData", medData)
          }).catch((err) =>{
            console.log(err)
          })
        }
        getList()
      }, [])

这是100%的工作,我可以将第一个文档的regNo与集合中的所有文档进行比较,这是我的控制台logx 1c 0d1x
我现在面临的挑战是当我刷新页面的时候,第二次useEffect在medData中返回0,也就是没有文档。这是我的控制台:-

一旦我刷新,我最初可以看到的数据就消失了!
此外,由于我使用async/await,我将所有内容链接在一起,起初我获得了regNo具有类似值的所有文档,但当我刷新时,它们都消失了。代码如下:

const [data, setData] = useState([]);
    const [dataSet, setDataSet] = useState({
        regNo: "",
    });

    const {userId}  = useParams();
    let id = userId

    let currentValue = dataSet.regNo
    console.log("currentvalue from doc", currentValue)

    useEffect(() => {
        let getUserDoc = async (id) => {
          let docRef = doc(db, `androcare/${id}`);
          let docSnap = await getDoc(docRef);
          console.log('getUserDoc() received:', docSnap);
          if (docSnap.exists) {
            let theData = docSnap.data();
            console.log('getUserDoc() setting userInfo:', theData);
            setDataSet(theData);
          }
        }

        const getList = async () => {
            const collectionRef = collection(db, "androcare")
          const q = query(collectionRef, where("regNo", "==", currentValue))
          await getDocs(q).then((task)=>{
           let medData = task.docs.map((doc) => ({...doc.data(),
          id: doc.id}))
          setData(medData)
          console.log("medData", medData)
          }).catch((err) =>{
            console.log(err)
          })
        }
      
        if (id) {
          getUserDoc(id);
          console.log("IdUser", id)
          getList();
        } else {
          console.log('useEffect() -- no ID value');
        }
      }, [id]);

我观察到的是刷新时,它将regNo视为空字符串,我如何解决这个问题。

z4bn682m

z4bn682m1#

我不精通react.js,但我认为你不应该把这两个查询的代码(首先是doc,然后是collection,正如我在另一个answer中所解释的)放在两个不同的useEffect块中。
你应该沿着下面的代码链接两个查询(我让你把它集成到react.js代码中,在一个唯一的useEffect块中):

let id = userId;
let docRef = doc(db, `dentist/${id}`);
let docSnap = await getDoc(docRef);
if (docSnap.exists) {
  setDataSet(theData);
  const theData = docSnap.data();
  const currentValue = theData.regNo;
  const collectionRef = collection(db, "dentist")
  const q = query(collectionRef, where("regNo", "==", currentValue))
  await getDocs(q).then((task)=>{
  let medData = task.docs.map((doc) => ({...doc.data(), id: doc.id}))
  setData(medData)
});

相关问题