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

Question

我最初认为这是一个误报，但直到现在我不知道为什么这个错误是有用的。

当您的外部道具 function 用于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

密码箱，固定