reactjs - 如何创建转发依赖项的 React hooks

Question

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

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

但是，这无法通过“严格依赖”linter:

• 它将回调视为未声明的依赖项。
• 我无法解析 deps，因为它不是数组文字。

是否有某种方法可以创建这样的 Hook ，我可以从用户那里获取一组依赖项并将它们转发到“真正的” Hook ？

(我的实际用例更复杂，这只是出于 Stack Overflow 目的的问题的简单表达)

Answer 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 问题。