在这种情况下，有没有办法避免无限循环的依赖关系，并将正确的依赖关系传递给useEffect钩子？
在这种情况下，有没有办法避免无限循环的依赖关系，并将正确的依赖关系传递给useEffect钩子？
提问于 2021-04-02 01: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-02 02: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
复制相关文章
相似问题
腾讯云开发者
