首页 > 解决方案 > 处理依赖反应查询

问题描述

我在同一个组件中有两个反应查询

const { data: sdrData, status: sdrDataLoading } = useQuery(
    [queryInfo[0]?.dcsSysId, data[0]?.dcsStructSysId, data[cardIndex]?.dcsStructNodeId],
    () => getSDR(queryInfo[0]?.dcsSysId, data[0]?.dcsStructSysId, data[cardIndex]?.dcsStructNodeId),
  );



  const { isIdle, data: sdrTemplateData, status: sdrTemplateDataLoading } = useQuery(
    [sdrData[0]?.dcsSdrSysId, queryInfo[0]?.fldTemplateSysId],
    () =>
      SDRTemplateValues(sdrData[0]?.dcsSdrSysId, queryInfo[0]?.fldTemplateSysId, {
        // The query will not execute until the userId exists
        enabled: !!sdrData[0]?.dcsSdrSysId,
        retry: true,
      }),
  );

我的第二个查询取决于我需要访问sdrData[0]的第一个查询中的第一个 arg 但是当我这样做时,查询最初是未定义的并且它失败了。有没有好的方法来处理这个。我看到你可以将它设置为一个变量,但我仍然面临同样的问题。

我需要一种方法来告诉第一个查询等到第二个查询完成后再尝试访问参数。我以为你可以enabled像我一样设置,但这也没有用。

标签: javascriptreact-query

解决方案


你在这里是正确的道路。

您只需要检查是否sdrData未定义。您正在尝试访问第一个元素 ( sdrData[0]),但最初它是未定义的。

...
{
  enabled: !!(sdrData && sdrData[0]?.dcsSdrSysId
}
...

推荐阅读