我很清楚这Hook has missing dependency是什么，它意味着什么以及为什么观察所有依赖项很重要，但是这个很奇怪。
export function Compo() {
const [value, setValue] = useState<number>();
useEffect(() => {
setValue(Date.now());
}, []);
return (
<>{value}</>
);
}
工作正常，但是：
function useValue() {
return useState<number>();
}
export function Compo() {
const [value, setValue] = useValue();
useEffect(() => {
setValue(Date.now());
}, []);
return (
<>{value}</>
);
}
秀出名React Hook useEffect has a missing dependency: 'setValue'. Either include it or remove the dependency array react-hooks/exhaustive-deps。
您在示例中注意到的是规则的一个怪癖react-hooks/exhaustive-deps。它给予它知道的钩子特殊的特权，并且知道在某些情况下是“稳定的”。
引用实现：
// Next we'll define a few helpers that helps us
// tell if some values don't have to be declared as deps.
// Some are known to be stable based on Hook calls.
// const [state, setState] = useState() / React.useState()
// ^^^ true for this reference
// const [state, dispatch] = useReducer() / React.useReducer()
// ^^^ true for this reference
// const ref = useRef()
// ^^^ true for this reference
// False for everything else.
来源：https : //github.com/facebook/react/blob/v17.0.1/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js#L152
具体来说，这部分规则似乎是useState在这些情况下免除钩子的 setter 的原因：
if (name === 'useState') {
const references = resolved.references;
for (let i = 0; i < references.length; i++) {
setStateCallSites.set(
references[i].identifier,
id.elements[0],
);
}
}
// Setter is stable.
return true;
钩子有用/聪明的不幸结果是，它可能会在其推理不起作用的地方导致混乱，就像您刚刚描述的场景一样。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句