为什么在嵌套的 object 属性上会触发 `react-hooks/exhaustive-deps` lint 规则？

Question

我正在尝试使用 React 挂钩来记忆回调。 此回调专门使用在 object 上定义的 function。

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