Question

在我的自定义钩子中使用状态时，我收到了一个无效的钩子调用错误。这是我的代码

import { useState } from 'react';

export default function useFetch() {
  const [randomValue, setRandomValue] = useState<number>();
  setRandomValue(3);

  return randomValue;
}

钩子在我的钩子文件夹中的路径：./src/hooks

有什么原因吗？

Answer 1

您的评论提到您从 useFetch() 内部调用 useEffect()。这就是您的问题所在。

钩子仅在组件渲染期间调用时才有效。 useEffect() 在渲染后触发。所以你不能从 useEffect 内部调用任何钩子。

由于您尚未发布该代码，因此很难建议如何解决该问题。

另外，同样重要的是，永远不要在渲染过程中调用状态设置器函数。并记住钩子函数在组件渲染时运行。设置状态会触发渲染，因此这通常会导致无限循环。

大多数情况下，在获取值并将其设置为状态时，您应该为其类型（例如 null）提供一个有效的初始值，并使用 useEffect() 来设置您想要的内容。

>

请记住，useEffect 的意思是“使用副作用”，其中副作用是渲染可能触发的东西，但不会在每次渲染时同步执行。

export default function useFetch() {
  const [randomValue, setRandomValue] = useState<number | null>(null);

  useEffect(() => {
    setRandomValue(Math.floor(Math.random() * 10));
  }, [setRandomValue]}


  return randomValue;
}

在自定义钩子中使用 nextjs 的无效钩子调用

1 个答案: