解决React Context中无限循环的根源与策略

// AuthProvider.tsx (部分原始代码)
// ...
const [accessToken, setAccessToken] = useState<string | null>(null)
const { 'nextauth-token': token } = parseCookies()

if ((!accessToken && token) || accessToken !== token) {
    setAccessToken(token) // 问题根源1：在渲染阶段调用 setState
    Api.defaults.headers.authorization = token
}
// ...
useEffect(() => {
    async function retrieveUserInformation(): Promise<void> {
        const response = await fecthSystemUserInfo()

        if (response.isRight()) {
            const user = response.value
            // await setSystemUser(user) // 问题根源2：此行被启用后，加剧循环
        }
    }

    if (!systemUser && accessToken) {
        retrieveUserInformation()
    }

    if (systemUser && !accessToken) {
        setSystemUser(null)
    }
}, [accessToken]) // 问题根源3：useEffect 依赖于 accessToken
// ...

// AuthProvider.tsx (修改后)
'use client'

import { AxiosError } from 'axios'
import { useRouter } from 'next/router'
import { destroyCookie, parseCookies, setCookie } from 'nookies'
import {
    ReactNode,
    createContext,
    useCallback,
    useEffect,
    useMemo,
    useState
} from 'react'

import { Either, left, right } from '@core/logic/Either'
import { accessLevel, controllers, endpoints } from '@routes/backend'
import { Api } from '@services/api/Axios'
import { fetchLogin } from '@services/api/FetchLogIn'

export type TSystemUser = {
    name: string
    role: string
} | null

export type TLoginParams = {
    phoneNumber: string
    password: string
}

export type TLoginResponse = Either<unknown, unknown>

type TAuthContext = {
    systemUser: TSystemUser
    login: (data: TLoginParams) => Promise<Either<unknown, unknown>>
    logout: () => void
}

export const AuthContext = createContext({} as TAuthContext)

export function AuthProvider({ children }: { ReactNode }) {
    const [systemUser, setSystemUser] = useState<TSystemUser>(null)
    const [accessToken, setAccessToken] = useState<string | null>(null)

    // 将初始 token 设置逻辑移入 useEffect，只在组件挂载时执行一次
    useEffect(() => {
        const { 'nextauth-token': token } = parseCookies()
        if (token) {
            setAccessToken(token)
            Api.defaults.headers.authorization = token
        } else {
            // 如果 cookie 中没有 token，确保 accessToken 状态为 null 且清除授权头
            setAccessToken(null)
            Api.defaults.headers.authorization = null
        }
    }, []) // 空依赖数组确保只在组件挂载时运行一次

    // 监听 accessToken 变化，同步更新 API 授权头（如果需要动态更新）
    // 注意：这里的逻辑是用于处理 accessToken 状态后续变化时同步更新 API 头的场景
    // 如果 accessToken 仅在初始加载和登录/登出时变化，可以考虑在 login/logout 中直接设置
    useEffect(() => {
        if (accessToken) {
            Api.defaults.headers.authorization = accessToken;
        } else {
            Api.defaults.headers.authorization = null;
        }
    }, [accessToken]);


    const fecthSystemUserInfo = useCallback(async (): Promise<
        Either<AxiosError<TSystemUser>, TSystemUser>
    > => {
        try {
            const response = await Api.get<TSystemUser>(
                accessLevel.session +
                    controllers.withSession +
                    endpoints.RetrieveUserInformation
            )

            return right(response.data)
        } catch (err) {
            const error = err as AxiosError<TSystemUser>

            switch (error.status) {
                default:
                    return left(error)
            }
        }
    }, [accessToken]) // 此处依赖 accessToken 是合理的，当 token 变化时需要重新获取用户信息

    useEffect(() => {
        async function retrieveUserInformation(): Promise<void> {
            const response = await fecthSystemUserInfo()

            if (response.isRight()) {
                const user = response.value
                setSystemUser(user) // 现在可以安全地启用此行
            }
        }

        if (!systemUser && accessToken) {
            retrieveUserInformation()
        }

        if (systemUser && !accessToken) {
            setSystemUser(null)
        }
    }, [accessToken, systemUser]) // 依赖项应包含 systemUser，以便在它为 null 时重新尝试获取

    const login = useCallback(
        async ({
            phoneNumber,
            password
        }: TLoginParams): Promise<TLoginResponse> => {
            try {
                if (systemUser) {
                    return right(null)
                }

                const response = await fetchLogin({ phoneNumber, password })

                if (response.isLeft()) {
                    return left(response.value)
                }

                const { accessToken: newAccessToken, user } = response.value

                setSystemUser(user)

                setCookie(undefined, 'nextauth-token', newAccessToken.token, {
                    expires: new Date(newAccessToken.expiresIn)
                })
                setAccessToken(newAccessToken.token) // 登录成功后更新 accessToken 状态

                return right(null)
            } catch (error) {
                console.log(error)

                return left(JSON.stringify(error, null, 2))
            }
        },
        [systemUser] // 依赖 systemUser，避免在已登录状态下重复登录
    )

    const logout = useCallback((): void => {
        const router = useRouter()

        destroyCookie(null, 'nextauth-token')
        Api.defaults.headers.authorization = null
        setAccessToken(null) // 登出时清除 accessToken 状态
        setSystemUser(null)

        router.push('/')
    }, []) // 登出操作通常不依赖外部状态

    const contextValue = useMemo(
        () => ({ systemUser, login, logout }),
        [systemUser, login, logout] // 依赖于实际使用的状态和函数
    )

    return (
        <AuthContext.Provider value={contextValue}>
            {children}
        </AuthContext.Provider>
    )
}