[英]useEffect with function that update the state as dependency leads to infinite loop
Code Sandbox: https://codesandbox.io/s/new-breeze-d260k代码沙箱: https://codesandbox.io/s/new-breeze-d260k
Login
, the accessToken is exchanged and stored in memory while the refreshToken is stored in localStorage.Login
时,accessToken 被交换并存储在 memory 中,而 refreshToken 存储在 localStorage 中。onRefreshToken()
function in a useEffect to be executed once (I wanted to pass an empty array as dependency but typescript/eslint complains and suggest that onRefreshToken()
should be the dependency. I admit that I don't understand why this is recommended to have always a dependency when you want the effect to be executed once).onRefreshToken()
function 要执行一次(我想将一个空数组作为依赖项传递,但 typescript/eslint 抱怨并建议onRefreshToken()
应该是依赖项。我承认我不明白为什么当您希望效果执行一次时建议始终具有依赖项)。setProfile()
and not setAccessToken()
.setProfile()
而不是setAccessToken()
。 However I don't understand why.The above issue is the main issue of this post but on a side note, the login/logout process don't sync between tabs so if you have any idea why, I would be happy to hear your advice on this point as well.上述问题是这篇文章的主要问题,但附带说明一下,登录/注销过程不会在选项卡之间同步,所以如果您知道原因,我也很乐意听到您在这一点上的建议。
Happy new year新年快乐
One way to fix this would be to check to see if you have an access token and only refresh it if you need to:解决此问题的一种方法是检查您是否有访问令牌,并且仅在需要时才刷新它:
export default function App() {
const { accessToken } = useAuthContext();
const { onRefreshToken, onSyncLogin, onSyncLogout } = useAuth();
useEffect(() => {
const refresh = async () => {
await onRefreshToken();
};
!accessToken && refresh();
}, [onRefreshToken, accessToken]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.