useLoadUserData与退出登录冲突

Question

import { useState, useEffect } from 'react'
import { useRequest } from 'ahooks'
import { getUserInfoService } from '../services/user'
import useGetUserInfo from './useGetUserInfo'
import { loginReducer } from '../store/userReducer'
import { useDispatch } from 'react-redux'

const useLoadUserData = () => {
	const [waitingUserData, setWaitngUserData] = useState(true)
	const dispatch = useDispatch()
	const { run } = useRequest(
		async () => {
			const data = await getUserInfoService()
			return data
		},
		{
			manual: true,
			onSuccess(result) {
				const { username, nickname } = result
				dispatch(loginReducer({ username, nickname }))
			},
			onFinally() {
				setWaitngUserData(false)
			},
		}
	)

	const { username } = useGetUserInfo()
	useEffect(() => {
		if (username) {
			setWaitngUserData(false)
			return
		}
		run()
	}, [username])

	return { waitingUserData }
}

export default useLoadUserData

useEffect内的这段逻辑判断username非真的时候会去调用请求获取userinfo， 刷新页面
1.username非真，执行EffectCallback，触发run，获取到userinfo后，派发loginReducer，将userinfo存入store中，username转为真
2. 此时点退出登录，派发logoutReducer，设置userinfo的state为initialState，修改了username，产生了副作用，执行EffectCallback，此时username非真，重复步骤1，自动回到了 manage/list页面了呀

Answer 1

双越 2023-05-06 08:23:08

username非真，不会到 list 页面，而会跳转到登录页

• 提问者 见信 #1

  老师，退出登录后，跳转到登录页了，并且重置了state里的userinfo，username转为初始化，非真，又触发了useLoadUserData 内的EffectCallback的run，然后发起了请求，又获取到了userinfo，存入state，username转为真，触发了useNavPage内的EffectCallback，然后又跳回到了list页面了。我又对着18-21节重新review了一遍代码，还是没找到问题，这个是我的代码仓，请老师帮忙看下 https://gitee.com/poohbear1994/wenjuan-fe

• 双越 回复 提问者 见信 #2

  username转为初始化，非真 —— 具体是什么值？

• 提问者 见信 回复 双越 #3

  退出，触发logoutReducer，用INIT_STATE替换原有state，INIT_STATE.username为空字符串

点开查看后面3条评论