为什么"反应钩子/穷举"lint 规则会在嵌套对象属性上触发?

Question

我正在尝试使用 React 钩子来记忆回调。 此回调专门使用在对象上定义的函数。

const setValue = useCallback((value) => {
    field.setValue(key, value);
}, [field.setValue, key]);

这将触发 Eslint 规则 react-hooks/exhaustive-deps 。
它希望我转而通过[field, key].

如果我然后将代码更改为以下内容，即使它看起来等效，我也不会收到警告：

const { setValue: setFieldValue } = field;
const setValue = useCallback((value) => {
  setFieldValue(key, value);
}, [setFieldValue, key]);

为什么 Eslint 在第一个例子中警告我？
在这种情况下，我可以安全地忽略它吗？

Answer 1

试试这个。

const setValue = useCallback((value) => {
  const set = field.setValue;
  set(key, value);
}, [field.setValue, key]);

但不建议这样做。看看这个解释。https://github.com/facebook/react/issues/15924#issuecomment-521253636