打字稿es-lint错误：react-hooks / exhaustive-deps

Question

我首先认为这是一个误报，但是直到现在我仍然不知道错误为什么有用。

在react-hooks/exhaustive-deps中使用外部props函数时，如何使useEffect错误变得没有意义呢？

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

codesandbox, fixed