在这种情况下，有没有办法避免无限循环的依赖关系，并将正确的依赖关系传递给useEffect钩子？
在这种情况下，有没有办法避免无限循环的依赖关系，并将正确的依赖关系传递给useEffect钩子？
提问于 2021-04-01 17:59:02
我有一个自定义钩子，它获取一个回调作为其中一个参数，并在useEffect中调用它
const customHook = (callback: Function) => {
...
useEffect(() => {
if (something) {
callback();
}
}, [other things, callback]);
return {values}
}这里的问题是，callback是一个函数，它导致useEffect在循环中运行。EsLint建议在父组件中使用useCallback。因此，我决定将这个callback包装在一个useCallback中，我将其命名为customHook。
因此，在我的组件中会有类似这样的内容：
const memoizedCallback = useCallback(() => {
myFunction(values);
}, [values, myFunction]);
const { values } = customHook(memoizedCallback);在这里我有我的问题-从customHook返回myFunction的依赖项，并且在它们定义之前我不能使用它们。但出于同样的原因，我也不能将memoizedCallback放在customHook调用之后。
现在我被困在这个无限的依赖循环中，我不确定如何解决这个问题，即使是以某种方式，而不是忽略eslint警告。
因此，任何想法和解决方案都将非常受欢迎:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-01 18:35:19
如果更改回调不会导致执行useEffect块，请将callback设置为ref：
const customHook = (callback: Function) => {
const fn = useRef(callback);
...
useEffect(() => {
fn.current = callback;
})
useEffect(() => {
if (something) {
fn.current(); // fn.current?.() if fn.current might be undefined
}
}, [something]);
return {values}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66909437
复制相关文章
点击加载更多
相似问题
useEffect更新它自己的依赖关系，导致无限循环
useEffect钩子依赖关系-重新呈现问题
具有依赖关系的useEffect被无限调用
在不触发useEffect的`useEffect`内设置useEffect钩子的依赖关系
useEffect警告说缺少依赖关系会导致无限循环。
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
