Question

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

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

但是，这不能通过“严格依赖” lint：

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

是否有某种创建钩子的方法，我从用户那里获取了一组依赖项并将它们转发到“真实”钩子？

（我的实际用例更加复杂，这只是出于堆栈溢出目的的简单表达）

Answer 1

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

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

不确定是不是故意的，还是将来可能会改变行为，但是现在如果您查看此codesandbox中的问题标签，应该报告0个掉毛问题。

如何创建转发依赖关系的React钩子

1 个答案: