我正在构建一个带有Firebase后端的Reaction应用程序,我陷入了在多个步骤中提取数据的困境,在这些步骤中,我使用第一个获取的数据作为第二个获取的数据的参数.

以下是我的代码:

  // GET DATA FROM FIRESTORE 
  const { getQrCode, getBranch } = DatabaseService();

这就是我获取第一个数据的方式.在这个案子里我有身份证.

  // GET QR CODE 
  const fetchQRCode = async () => {
    const data = await getQrCode(id); //I have this ID
    setBranchQr(data);
  };

这是我需要使用第一次获取的数据进行的第二次获取:

  // GET BRANCH DATA
  const fetchBranchData = async () => {
    const data = await getBranch(branchQr.branchId); //I get this from the first fetch
    setBranchData(data);
    console.log(data)
  };

以下是使用效果:

   useEffect(() => {
    fetchQRCode();
    fetchBranchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  useEffect(() => {}, [branchQr, branchData]);

推荐答案

正如Pooria所说,我将使用TanStack查询

使用NPM或Yarn 安装:

npm i @tanstack/react-query

将其导入您的根JS文件:

import { QueryClientProvider, QueryClient } from "@tanstack/react-query";

创建客户端

  const queryClient = new QueryClient();

包装您的根应用程序

    <QueryClientProvider client={queryClient}>

    </QueryClientProvider>

导入您的useQuery

import { useQuery } from "@tanstack/react-query";

获取第一组数据

      const { data: nameThatMakesSenseToYou } = useQuery({
    queryFn: () =>  getQrCode(id),
    queryKey: ["qrcode"],
  });

根据第一组数据创建分支机构ID

  const branchId = nameThatMakesSenseToYou.branchId;

获取第二组数据:

  const { status, data: branches } = useQuery({
    queryKey: ["branch", branchId],
    queryFn: () => getBranch(branchId),
    enabled: !!branchId,
  });

如果您记录了分支,您应该会看到您正在查找的数据.

Javascript相关问答推荐

类型错误:tasks.map不是函数(MERN堆栈)

如何使用JavaScript动态地将CSS应用于ToDo列表?

禁用从vue.js 2中的循环创建的表的最后td的按钮

Cypress -使用commands.js将数据测试id串在一起失败,但在将它们串在一起时不使用命令有效

传递一个大对象以在Express布局中呈现

我的服务工作器没有连接到我的Chrome扩展中的内容脚本.我该怎么解决这个问题?

查找最长的子序列-无法重置数组

提交链接到AJAX数据结果的表单

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

在HTML语言中调用外部JavaScript文件中的函数

为什么我的getAsFile()方法返回空?

本地库中的chartjs-4.4.2和chartjs-plugin-注解

Use Location位置成员在HashRouter内为空

为什么我的按钮没有从&q;1更改为&q;X&q;?

如何在Press上重新启动EXPO-AV视频?

处理TypeScrip Vue组件未初始化的react 对象

构建器模式与参数对象输入

react 路由如何使用从加载器返回的数据

如何在Java脚本中并行运行for或任意循环的每次迭代

P5play SecurityError:无法从';窗口';读取命名属性';Add';:阻止具有源的帧访问跨源帧