0

在我的组件中，我需要 fetch contestDetails，从响应 ( draftgroupId) 中获取一个值，然后获取draftGroup. 通常我会将它们分别包装在useEffect：

  const [draftGroupId, setDraftGroupId] = useState();
  useEffect(() => {
    api.getContestDetails(contestId).then(res => setDraftGroupId(res.draftGroupId));
  }, []);

  useEffect(() => {
    api.getDraftGroupId(draftGroupId).then(res => /* use the response */);
  }, [draftGroupId]);

但是，我使用 RTK Query 进行提取，因此提取本身是使用钩子执行的。RTK Query 处理何时获取和何时不获取（或类似的东西），因此第一个查询useGetContestByIdQuery(contestId);可以位于组件的顶层。

然而，第二个查询useGetDraftGroupByIdQuery(draftGroupId);需要等到我们有一个contestId. 但是你不能有条件地调用一个钩子，所以我不能把它包装在一个if，你也不能从另一个钩子调用一个钩子，所以我不能把它包装在一个useEffect像contestId依赖一样的依赖中上面的例子。

我不确定这是否会改变事情，但我也没有使用 RTKQ 挂钩的返回值，因为我在自己的 RTK 减速器中处理该数据（使用extraReducers）。我不认为这有什么不同，因为无论我是draftgroupId从 redux 获得还是从data查询钩子的返回中获得，我的问题仍然是一样的。

这是我想出的，它只是将每个 fetch 包装在它自己的组件中，因为组件将有条件地呈现。

const GetContest = ({ contestId, ...props }) => {
  useGetContestByIdQuery(contestId); // populates state.currentDraft for next line
  
  const { draftgroupId, gameTypeId } = useSelector(getCurrentDraftState).contest;

  return !draftgroupId ? null : (
    <GetDraftGroup
      draftGroupId={draftgroupId}
      gameTypeId={gameTypeId}
      {...props}
    />
  );
};

const GetDraftGroup = ({ draftGroupId, gameTypeId, ...props }) => {
  useGetDraftGroupByIdQuery(draftGroupId, gameTypeId); // populates state.currentDraft.players for next line

  const players = useSelector(getAllPlayers);

  return !players ? null : <ActualGameScreen {...props} />;
};

这不可能是正确的方法，对吧？使用 RTK Query 执行此操作的正确方法是什么？

4

1 回答 1

1

您可以使用该skip选项或skipToken为您的“条件”案例：

useGetContestByIdQuery(contestId ?? skipToken);

或者

useGetContestByIdQuery(contestId, { skip: !contestId });
于 2021-11-05T21:09:14.320 回答