React/Redux 获取数据并有条件地渲染组件 - 重新渲染太多

Question

我想从我的后端获取数据，相应地更改“isLoggedIn”状态，从而有条件地渲染组件。我只是无法理解如何以组件不会呈现两次的方式构造它。

首先在我的 AuthForm 组件中，有一个登录功能。它设置了一个用于刷新 JWT 令牌的 httpOnly cookie，并直接在标头上设置了一个 JWT 令牌。

const login = async () => {
        try {
            const response = await axios.post(props.baseUrl + "/auth/login", {
                email,
                password,
            })

            axios.defaults.headers.common[
                "Authorization"
            ] = `Bearer ${response.data.token}`

            dispatch(toggleLogin(true))
        } catch ({ response }) {
            console.log(response)
        }
    }

因为我想显示游戏 UI 而不是 AuthForm，所以我正在调度 toggleLogin 操作。

在主组件中，我有一个 refreshToken 函数，它检查客户端是否有一个 httpOnly cookie，如果它有效则返回一个新的 JWT。这样用户在页面刷新时仍然登录。

const Tamagotchi = () => {
    const isLoggedIn = useSelector((state) => state.isLoggedIn)
    const dispatch = useDispatch()

    const refreshToken = async () => {
        try {
            const response = await axios.get(baseUrl + "/auth/refresh-token")

            axios.defaults.headers.common[
                "Authorization"
            ] = `Bearer ${response.data.token}`

            dispatch(toggleLogin(true))

            setTimeout(() => {
                refreshToken()
            }, response.data.expiresIn * 1000 - 500)
        } catch ({ response }) {
            if (response.status !== 201) {
                dispatch(toggleLogin(false))
                console.log("Not authorized")
            }
        }
    }

    useEffect(() => {
        refreshToken()
    })

    return (
        <TamagotchiWrapper>
            <TamagotchiView>
                {isLoggedIn ? <TamagotchiUI /> : <AuthForm />}
            </TamagotchiView>
        </TamagotchiWrapper>
    )
}

如果用户正在登录，或者正在刷新页面，Tamagotchi 组件会被渲染两次。由于isLoggedIn 发生了变化，因此状态发生了变化，因此它再次呈现并再次调用 useEffect 挂钩。 这个怎么办？

提前致谢。

Answer 1

尝试将refreshToken() 调用封装在useMemo 中，而不是useEffect。 useEffect 在组件打印 JSX 之后起作用，而 useMemo 在它之前起作用。

useMemo(() => {
  refreshToken()
}, []);

Answer 2

请提供空的依赖数组，这意味着仅在初始加载期间渲染。

 useEffect(() => {
        refreshToken()
    }, [])

Answer 3

解决方案是将refreshToken 作为useEffect() 中的依赖项传递，并将refreshToken() 函数包装在useCallback Hook 中。

然后将refreshToken() 函数传递给我的AuthForm 组件并在成功登录时调用它。

这样，refreshToken 函数会在打开应用程序以验证用户身份时正确调用，并且在成功登录时能够刷新令牌。