如何在useeffect钩子中停止无限循环答案

【问题标题】：How can stop infinite loop in useeffect hook如何在useeffect钩子中停止无限循环
【发布时间】：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] 仍然有同样的警告问题

标签： javascript reactjs api react-hooks frontend

【解决方案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]);
      });

【讨论】：