我的目标是获取包含具有相同值的字段的所有文档……第一次运行我的应用程序时,它根据当前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()
      }, [])

This worked 100%, I could compare the regNo from the first document against all the documents in the collection, Here's my console logenter image description here

The challenge I'm facing now is when I refresh the page, the second useEffect returns 0 in the medData, that is, no document.. Here's my console:- enter image description here

一旦我刷新,我最初看到的数据就消失了!

此外,由于我使用的是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视为空字符串,以及我如何解决此问题.

推荐答案

我不精通react.js,但我认为您不应该将这两个查询的代码(首先是文档,然后是集合,如我在其他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)
});

Reactjs相关问答推荐

使用筛选器的Primereact DataTable服务器端分页?

如何使ionic 面包屑在州政府条件下可点击?

安装使用环境的BIT组件的依赖项

React 错误: 只能用作 元素的子元素,从不直接渲染.请将您的 包裹在

Chakra UI:如何在选中状态下设置复选框 colored颜色

如何在 ChartJS 中创建此图表?在 NEXTjs 和 TSX 中

useRef.current.value 为空值

使用D3.js绘制和展示弦图的右下方象限

将 clerk 与 supabase 集成的最佳实践

在react 中从外部 api 渲染列表

在 React 中,为什么在使用 addEventListener 时外部元素上的 onclick 事件监听器在内部元素的 onclick 事件监听器之前执行?

如何使用 React 在客户端获取 nestjs websocket 异常错误?

如何从其他组件访问 useQuery refetch 方法?

setState 改变对象引用

如何通过 Material ui select 使下拉菜单下拉

渲染的钩子比预期的少.这可能是由 React Hooks 中意外的提前返回语句引起的

如何在 Cypress E2E 的站点上测试react 组件?

.filter() 函数在删除函数中创建循环 - React

如果查询不存在,如何返回所有产品?

交换键仍然引入了 fresh 的 DOM 元素