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

假设我想创建一个类似于

useffect

的React钩子，但它只在所有依赖项都为非null时运行。看起来是这样的：

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

但是，这无法通过“严格依赖”过关：

• 它将

  回调

  视为未声明的依赖项
• 我无法解析

  deps

  ，因为它不是数组文本

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

---

（我的实际用例更复杂，这只是堆栈溢出问题的一个简单表达式）

如果您不这样内联声明useEffect回调，我认为linter不会抱怨DEP或回调：

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

---

不确定这是故意的还是行为将来可能会改变，但现在如果您检查此中的“问题”选项卡，则应报告0个linting问题。

您的代码在技术上没有问题，这只是对由穷尽deps lint规则执行的静态分析的故意限制。据我所知，所有尝试动态传递依赖项的情况都会抛出此警告，包括使用扩展语法，因为动态数组和非liiteral数组并非详尽无遗。但是，如果您知道自己在做什么，您可以在

deps

所在的行之前添加

//eslint禁用下一行react hooks/deps

，警告应该消失；我的问题是是否还有更多的语义解决方案——也就是说，是否有一种方法可以让linter意识到

回调

和

deps

之间的关系