reactjs - 在条件下调用钩子

Question

我正在使用 React Query 来查询我的数据，并且我有一个钩子“useDraft”，我只想在满足条件时调用它。

const getDraft = useDraft;
let draft;

if (category === "drafts") {
   const { data } = getDraft({
      id: id,
   });
   draft = data;
   projectId = draft && draft.projectId;
}

如果我从一个满足条件的地方走到另一个地方，我会遇到以下错误之一（取决于我要去的方式）：

Rendered more hooks than during the previous render.或者Rendered fewer hooks than expected.

谁知道我该如何解决这个问题？谢谢！

Answer 1

正如评论之一中链接的文档中所提到的，应该在您的组件内一致地（即始终以相同的顺序）而不是有条件地调用挂钩。

您可以通过让钩子返回草稿和函数来解决它。然后，您将调用组件顶部的钩子，然后有条件地调用钩子返回的函数以加载草稿。

例如（假设草案来自一些 API）：

function useDraft(){
  const [draft, setDraft] = useState();
  return [
    draft,
    (params) => {
      fetch(/* whatever */)
        .then(res => res.json())
        .then(draft => {
          setDraft(draft);
        });
    }
  ];
}

function MyComponent(){
  const [draft, loadDraft] = useDraft();
  const projectId = draft && draft.projectId;

  if (category === "drafts") {
    loadDraft({id: id});
  }
}