我有一个实用函数来在引用中存储不断变化的值:
export function useRefOf<T>(value: T) {
const ref = useRef(value);
useEffect(() => {
ref.current = value;
}, [value]);
return ref;
}
但是,当我在效果中使用它时,我不想在值更改时重新渲染:
const someValueRef = useRefOf(someValue);
useEffect(() => {
doSomeGreatStuff(someValueRef.current);
}, [doSomeGreatStuff])
我打破了 ESLint exhaustive-deps
规则:
React Hook useEffect has a missing dependency: 'someValueRef'. Either include it or remove the dependency array
我知道如果我使用常规的 useRef
而不是我的 useRefOf
,ESLint 不会提示。
如何告诉 ESLint 将 useRefOf
视为来自 useRef
的引用,并容忍它不在依赖项数组中?
最佳答案
通常,使用exhaustive-deps
,在不忽略规则的情况下解决问题的“干净”方法是将值添加到依赖项数组中,即使这样做实际上并没有完成任何事情。这种方法可以用在这里。 ref 是稳定的;给定组件的 useRef 返回的值每次都是同一个对象。因此,如果您进行更改,您的代码将执行与现在相同的操作
}, [doSomeGreatStuff])
至
}, [doSomeGreatStuff, someValueRef])
关于reactjs - ESLint 详尽-deps : ignore value that came from a ref,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72467628/