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});
  }
}

在某种情况下呼叫钩子

1 个答案: