如何修复错误：将 SWR 与 useEffect 结合使用时，渲染的钩子比上一次渲染时更多

Question

我在使用带有 useEffect 挂钩的 SWR 时遇到问题。

我收到错误Rendered more hooks than during the previous render.

我的代码如下：

const { id } = router.query;
  const { data: recipe } = useRecipe(id);

  if (recipe) {
    useEffect(() => {
      if (typeof post.title === "string") {
        setTitle(recipe.title);
      }
    }, [recipe]);
  }

  if (!recipe) {
    return <div>Loading...</div>;
  }

useRecipe 是一个自定义的 SWR 钩子，它完美地工作，当我将 useEffect 注释掉数据加载时，如预期的那样。如果我将 useEffect 移到条件配方检查上方，我会得到配方未定义，如您所料。

我很想了解为什么我会收到错误“渲染的钩子比上一次渲染时更多”。

Answer 1

不要在循环、条件或嵌套函数中调用 Hooks。相反，请始终在 React 函数的顶层使用 Hooks。您可以在文档here

中阅读更多内容

在你的情况下，你可以这样做：

const { id } = router.query;
const { data: recipe } = useRecipe(id);

useEffect(() => {
  if (recipe && typeof post.title === "string") {
    setTitle(post.title);
  }
}, [recipe]);

if (!recipe) {
  return <div>Loading...</div>;
}

return ....;