typescript es-lint error: react-hooks/exhaustive-deps

Question

我最初认为这是一个假阳性，但直到现在我都不知道为什么这个错误是有帮助的。

当您的外部props函数在useEffect中使用时，不需要将其置于依赖关系中，如何理解react-hooks/exhaustive-deps错误？

interface props {
someExternalPropFunction: any;
}
const App: React.FC<props> = ({ someExternalPropFunction }) => {
const [formValues, setFormValues] = React.useState<initialStateProps>({
eventInfo: {
name: "",
location: ""
}
});
React.useEffect(() => {
someExternalPropFunction(formValues);
}, [formValues]); //what is going on here?
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
</div>
);
};

https://codesandbox.io/s/tender-swirles-cu0qw

Answer 1

由于道具可能会更改，dep列表需要someExternalPropFunction。

React.useEffect(() => {
someExternalPropFunction(formValues);
}, [someExternalPropFunction, formValues]); // now it is fixed

代码沙盒，固定