如何将自定义挂钩的依赖项传递给 useEffect 并使其表现得像 useEffect？

Question

如果给定的

useEffect

（或依赖项）发生变化，如何再次触发

useRedirect

自定义挂钩中的

deps

？

代码：

const OnboardingLayout = () => {
    const { user } = useUserContext()

    useRedirect("/c", () => {
        if (user) {
            Object.values(user.onboarding).every(e => e)
        }
    }, [user])

    return (
        <Outlet />
    )
}

export const useRedirect = (path, validator = () => true, deps = []) => {
    const navigate = useNavigate()

    useEffect(() => {
        if (validator()) {
            navigate(path)
        }
    }, [path, navigate, validator, ...deps])
}

useRedirect

中的

OnboardingLayout

未按预期工作，因为如果

user

对象现在为真（来自

null

），则

useEffect

自定义挂钩中的

useRedirect

不会再次触发，即使我已经通过了一种依赖。另外，在

deps

中传播

useEffect

会给我来自 eslint 的警告，其中显示：“React Hook useEffect 在其依赖项数组中有一个 spread 元素。这意味着我们无法静态验证您是否传递了正确的依赖项.”.

Answer 1

对于 ESlint 警告你无能为力——它是完全正确的，因为它现在无法帮助你（没关系，这只是一个警告，提醒你小心那个 dep 数组）。

快速浏览一下，您的逻辑看起来不错，只是您的

validator()

 实现永远不会返回除 

undefined

 之外的任何内容。

怎么样

useRedirect("/c", () => {
  return user && Object.values(user.onboarding).every(e => e);
}, [user])

相反？