如何使用 eslint 规则 react-hooks/exhaustive-deps 警告无点函数表达式中的违规行为答案

【问题标题】：How to use eslint rule react-hooks/exhaustive-deps to warn about violations in point free function expressions如何使用 eslint 规则 react-hooks/exhaustive-deps 警告无点函数表达式中的违规行为
【发布时间】：2020-09-05 11:58:20
【问题描述】：

在我的.eslintrc 中，我已经配置了规则"react-hooks/exhaustive-deps": "error"。

当钩子以无点样式使用时，linter 似乎无法警告丢失的 deps。这是一个最小的例子：

const always = input => () => input;
const useDemonstration = () => {
  const [value, setValue] = useState(0);
  const getValue = useCallback(always(value), []);
  useEffect(() => {
    setValue(previousValue => previousValue + 1);
  }, []);
  return getValue;
};

上述代码违反了穷举 deps 规则：getValue 缺少依赖关系 value 但 linter 没有发出任何错误。

我已经知道我可以将 always(value) 更改为 () => always(value)() 以使 linter 再次工作。我正在寻找一种不需要更改我编写的代码即可获得 lint 错误的解决方案。

无论这是否是预期行为我希望在示例这样的情况下出现我的 linter 错误。是否有 linter 规则或解决方法可以做到这一点？

【问题讨论】：

标签： reactjs react-hooks eslint

【解决方案1】：

你不能，ESlint 是一个语法分析器，因此它不知道语义（“always 返回一个函数”）。

通过引入 Flow 和 Typescript 等类型系统，您需要 semantic analysis 来获得所需的行为。

【讨论】：