為什么在嵌套的 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