React 错误 - \“渲染的钩子比上次渲染时多。\”答案

【问题标题】：React Error - "Rendered more hooks than during the previous render."React 错误 - \“渲染的钩子比上次渲染时多。\”
【发布时间】：2023-02-13 22:46:39
【问题描述】：

我正在开发 Raycast 扩展。

在此函数中，我需要在查询之前创建或更新数据库：

import { useSQL } from "@raycast/utils";

export const useSqlNote = <NoteItem>(query: string) => {
  const [ready, setReady] = useState<boolean>(false);

  let theData: NoteItem[] = [];
  let loadingSelect = true;
  let permissionVw;

  useEffect(() => {
    (async () => {
      await create_or_update_db();
      setReady(true);
    })();
  }, [query]);

  try {
    const { data, isLoading, permissionView } = useSQL<NoteItem>(PATH, query);

    if (ready) {
      theData = data || [];
      loadingSelect = isLoading;
      permissionVw = permissionView;
    }
  } catch (e) {}

  return { data: theData, isLoading: loadingSelect, errorView: permissionVw };
};

当数据库已经创建时，没有pb。

但是当需要创建它时，这个过程需要几毫秒——当然调用钩子 useSQL 会引发错误，但它应该被处理。但是，我收到此错误：

警告：React 检测到 Command 调用的 Hooks 的顺序发生了变化。
...
错误：渲染的钩子比上次渲染时多。

关于如何解决它的任何想法？

【问题讨论】：

很确定您需要在组件的顶层调用挂钩。删除 try catch 应该会删除 useSQL 错误。

标签： reactjs react-hooks

【解决方案1】：

您没有在组件的顶层调用 useQuery。删除 try catch 块。

要有条件地调用 useQuery 挂钩，raycast useQuery 的文档指出您可以使用 execute 参数传递选项以跳过查询的调用。

“options.execute 是一个布尔值，指示是否实际执行该函数。这对于函数的一个参数取决于可能无法立即使用的东西（例如，取决于某些用户输入）的情况很有用。因为 React 要求在渲染器上定义每个挂钩，所以这个标志使您能够立即定义挂钩，但要等到所有参数都准备好才能执行该函数。”

    const { data, isLoading, permissionView } = useSQL<NoteItem>(PATH, query, {execute: ready});
//You do not need this
//if (ready) {
//      theData = data || [];
//      loadingSelect = isLoading;
//      permissionVw = permissionView;
//    }

  return { data: data || [], isLoading, errorView: permissionView };

【讨论】：