如何在useeffect钩子中停止无限循环
Posted
技术标签:
【中文标题】如何在useeffect钩子中停止无限循环【英文标题】:How can stop infinite loop in useeffect hook 【发布时间】:2021-09-30 07:03:50 【问题描述】: const [list, setlist] = useState([]);
const token = localStorage.getItem("token");
const requestOptions =
method: "GET",
headers: authorization: `Bearer $token` ,
;
useEffect(() =>
fetch("http://localhost:3000/recruiter/postedjobs",requestOptions)
.then((response) => response.json())
.then((data) =>
setlist(data.data);
);
);
我正在研究 react js,我必须在页面渲染后显示用户列表,所以我使用 useeffect 钩子当我编写 useeffect 钩子时它调用 api 无限时间如何阻止它。如果我添加空白依赖项 [] 它显示依赖项中缺少请求选项
【问题讨论】:
添加[]
,然后将requestOptions
添加到其中或将eslint-disable-next-line
放在该行之前
如果添加 [requestOptions] 会怎样?只有当请求选项发生变化时,它才应该重新获取
@Teneff requestOptions
在每次渲染时都会被重新创建,并且是一个需要进行参考比较的对象。这意味着将requestOptions
添加到依赖数组将导致useEffect
在每次重新渲染时运行。
我传递了空数组但反应显示警告他'requestOptions'对象使useEffect Hook(在第17行)的依赖关系在每次渲染时发生变化。将它移到 useEffect 回调中。或者,将“requestOptions”的初始化包装在它自己的 useMemo() 中
如果我添加 [requestoptions] 仍然有同样的警告问题
【参考方案1】:
将一个空数组作为第二个参数传递给 useEffect Hook。
useEffect( ()=>
console.log(‘hello’);
, [] );
如果您将 Effect Hook 的第二个参数留空,您将陷入无限循环,因为 Effect Hook 始终在状态更改后运行。由于 Effect Hook 触发了另一个状态变化,它会一次又一次地运行以增加计数。
【讨论】:
它停止循环但显示警告 React Hook useEffect has a missing dependency: 'requestOptions'。要么包含它,要么移除依赖数组 @Vikas21 这是来自 eslint 的警告,禁用它。【参考方案2】:您应该将 requestOptions 作为第二个参数传递
const [list, setlist] = useState([]);
const token = localStorage.getItem("token");
const requestOptions =
method: "GET",
headers: authorization: `Bearer $token` ,
;
useEffect(() =>
fetch("http://localhost:3000/recruiter/postedjobs",requestOptions)
.then((response) => response.json())
.then((data) =>
setlist(data.data);
, [requestOptions]);
);
【讨论】:
以上是关于如何在useeffect钩子中停止无限循环的主要内容,如果未能解决你的问题,请参考以下文章