How to fix Error: Rendered more hooks than during the previous render when using SWR with useEffect

Question

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

我收到错误“渲染的钩子比上次渲染时更多”。

我的代码如下：

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 移动到条件配方检查上方，我得到的配方未定义，如您所料。

我很想知道为什么我会收到错误 'Rendered more hooks than during the previous render'。

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 ....;

How to fix Error: Rendered more hooks than during the previous render when using SWR with useEffect

How to fix Error: Rendered more hooks than during the previous render when using SWR with useEffect

reactjs

swr