typescript es-lint错误:react-hooks/exhaustive deps

Question

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

当你的外部道具函数在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

副表需要someExternalPropFunction，因为属性可能会改变。

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

codesandbox, fixed