如何在 useEffect() 中进行查询以避免 InvalidHookError？答案

【问题标题】：How do I make a query in useEffect() to avoid InvalidHookError?如何在 useEffect() 中进行查询以避免 InvalidHookError？
【发布时间】：2021-05-05 13:07:03
【问题描述】：

我正在尝试在用户登录后查询 api 以获取用户权限。但是如果我在useEffect() 中写入useQuery()，则会出现InvalidHookError，因为它会破坏React 的rules of hooks。

const OnHeader = () => {
    const [user, loading, error] =
        typeof window !== "undefined" ? useAuthState(firebase.auth()) : [null, true, null]
    useEffect(() => {
        if (user) {
            user.getIdToken().then(idToken => {
                localStorage.setItem("accessToken", idToken)
            })
            // todo: query permissions and set them in localstorage
            // but if I put useQuery() here it breaks the rules
        }
    }, [user])

}

我目前的解决方法是使用另一个常量userLoggedIn 来检测用户是否已登录。但我想知道是否有更好的方法来编写它？

const OnHeader = () => {
    const [user, loading, error] =
        typeof window !== "undefined" ? useAuthState(firebase.auth()) : [null, true, null]
    const [userLoggedIn, setUserLoggedIn] = useState(false)

    var p = useQuery(
        gql`
            query QueryPermissions {
                permissions {
                    action
                    isPermitted
                }
            }
        `,
        {
            skip: !userLoggedIn,
            onCompleted: data => {
                localStorage.setItem("permissions", JSON.stringify(data))
            },
        }
    )

    useEffect(() => {
        if (user) {
            user.getIdToken().then(idToken => {
                localStorage.setItem("accessToken", idToken)
                setUserLoggedIn(true)
            })
        }
    }, [user])
}

【问题讨论】：

有条件地使用两个钩子 ...将useQuery移动到“主流”并使用skip是正确的方法...您也可以使用useLazyQuery

标签： reactjs graphql apollo use-effect

【解决方案1】：

问题不在于useEffect，而在于您对useAuthState 的调用。你通过有条件地调用一个钩子来破坏the rules of hooks，这是一个禁忌。删除条件调用并将默认值放入您的自定义挂钩中。

【讨论】：