如何修复使用useEffect React钩子时丢失的依赖项警告

对于React 16.8.6(在以前的版本16.8.3上很好),当我试图阻止在获取请求上进行无限循环时,我会遇到以下错误:

/src/components/BusinessesList.js
第51行:React Hook useEffect缺少依赖项:“FetchBusinesss”。
包括它或删除依赖项数组react hooks/dep

我一直无法找到一个解决方案来停止无限循环。我不想使用useReducer()。我确实找到了关于“穷举deps”lint规则的讨论反馈,其中一个可能的解决方案是,如果您认为自己知道自己在做什么,您可以随时/ESLint禁用下一行react hooks/穷举deps。我对自己在做什么没有信心,所以我还没有尝试实现它

我有这个当前设置,React hook useffect持续运行/infinite loop,唯一的注释是关于useCallback(),我不熟悉

我当前如何使用useffect()(我只想在开始时运行一次,类似于componentDidMount()):

useffect(()=&gt{
获取业务();
}, []);
const fetchbusinesss=()=>{
返回fetch("theURL",{method:"GET"}
)
。然后(res=>normalizeResponseErrors(res))
。然后(res=&gt{
返回res.json();
})
。然后(RCVD=&gt{
//一些东西
})
.catch(错误=&gt{
//一些错误处理
});
};

如果您没有在效果之外的任何地方使用fetchBusinesses方法,您可以简单地将其移动到效果中并避免警告

useffect(()=&gt{
常量=()=&gt{
返回fetch(“theURL”,{method:“GET”}
)
。然后(res=>normalizeResponseErrors(res))
。然后(res=&gt{
返回res.json();
})
。然后(RCVD=&gt{
//一些东西
})
.catch(错误=&gt{
//一些错误处理
});
};
获取业务();
}, []);

但是,如果在渲染之外使用FetchBusiness,则必须注意两件事

  1. 如果在装载过程中使用notfetchbusinesss作为一种方法传递,并使用其封闭闭包,是否存在任何问题
  2. 您的方法是否依赖于从其封闭闭包接收的某些变量?你不是这样的
  3. 在每次渲染时,都会重新创建FetchBusiness,因此将其传递给useEffect会导致问题。因此,如果要将fetchbusiness传递给依赖项数组,首先必须对其进行记忆

总而言之,我想说,如果您在useffect之外使用fetchbusinesss可以使用//eslint禁用下一行react hooks/deps禁用规则,否则可以将该方法移到useffect内部

要禁用该规则,请按如下方式编写

useffect(()=&gt{
//其他代码
...
//eslint禁用下一行react HOOK/deps
}, []) 

发表评论