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

Question

在我的自定义挂钩中使用 state 时出现无效的挂钩调用错误。 这是我的代码

import { useState } from 'react';

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

  return randomValue;
}

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

有什么理由吗？

Answer 1

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

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

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

---

此外，这同样重要，切勿在渲染期间调用 state 设置器 function。 请记住，钩子函数在组件呈现时运行。 设置 state 会触发渲染，因此这通常会导致无限循环。

大多数时候，当获取一个值并将其设置在 state 中时，您应该为其类型（如null ）设置一个有效的初始值，并使用useEffect()来设置您想要的东西。

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

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

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


  return randomValue;
}

---