如何创建转发依赖项的 React 钩子答案

【问题标题】：How to create React hooks that forward dependencies如何创建转发依赖项的 React 钩子
【发布时间】：2019-05-20 23:55:03
【问题描述】：

假设我想创建一个类似useEffect 的 React Hook，但它仅在所有依赖项均非空时运行。它看起来像这样：

const useNonNullEffect = (callback: () => void, deps: any[]) => useEffect(() => {
    if(deps.every(dep => dep !== null)) callback()
}, deps)

但是，这未能通过“严格依赖”linter：

它将callback 视为未声明的依赖项。
我无法解析 deps，因为它不是数组字面量。

有没有办法创建像这样的钩子，我从用户那里获取一组依赖项并将它们转发到“真正的”钩子？

（我的实际用例比较复杂，这只是为了Stack Overflow目的的问题的简单表达）

【问题讨论】：

您的代码在技术上没有任何问题，这只是对穷举-deps lint 规则执行的静态分析的有意限制。据我所知，您尝试动态传递依赖项的所有情况都会引发此警告，包括使用扩展语法，因为动态和非文字数组并非详尽无遗。如果您知道自己在做什么，但是您可以在 deps 所在的行之前添加 // eslint-disable-next-line react-hooks/exhaustive-deps，警告应该会消失。
是的；我的问题是是否还有更多语义解决方案——也就是说，是否有办法让 linter 了解 callback 和 deps 之间的关系

标签： reactjs typescript react-hooks

【解决方案1】：

如果你没有像这样声明你的 useEffect 回调内联，我认为 linter 不会抱怨 deps 或回调：

const useNonNullEffect = (callback: () => void, deps: any[]) => {
  const fn = () => {
    if(deps.some(dep => dep === null)){
      return
    }
    return callback()
  }
  useEffect(fn, deps)
}

不确定这是否是故意的，或者行为是否会在未来发生变化，但现在如果您检查此 codesandbox 中的问题选项卡，应该会报告 0 个 linting 问题。

【讨论】：