为什么`react-hooks/exhaustive-deps` lint 规则会在嵌套对象属性上触发？答案

【问题标题】：Why does `react-hooks/exhaustive-deps` lint rule trigger on nested object properties?为什么`react-hooks/exhaustive-deps` lint 规则会在嵌套对象属性上触发？
【发布时间】：2020-03-18 03:11:21
【问题描述】：

我正在尝试使用 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 在第一个示例中警告我？在这种情况下我可以放心地忽略它吗？

【问题讨论】：

How to fix missing dependency warning when using useEffect React Hook? 可能重复
我看了一下，不是重复的。该问题中的函数未被引用为对象。
@MattHuggins 第二个例子不会抛出错误：/？您正在重新声明相同的变量。
@James - 感谢您指出这一点，我已经更新了示例以更好地复制我的场景。
这对我来说似乎是 linting 规则中的一个错误。在您的第一个示例中，field.setValue 肯定是更好的传递方式。如果 react 在钩子中进行深度对象相等性检查，那么这可以防止不必要的检查，如果它们不这样做，那么传递 field 就是完全不正确的。

标签： react-hooks eslint usecallback eslint-plugin-react-hooks

【解决方案1】：

试试这个。

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

但不推荐。看看这个解释。 https://github.com/facebook/react/issues/15924#issuecomment-521253636

【讨论】：

感谢 Facebook 的官方消息。我认为它与this 上下文有关，但找不到任何相关内容。