如何在没有无限循环的情况下在 React 的 useEffect 钩子中使用 window.open()? [英] How to use window.open() within useEffect hook in React without an infinite loop?

问题描述

我是 React、Redux 和 Typescript 的新手.我正在尝试实现 SSO 和 OAuth，如

I am new to React, Redux and Typescript. I am trying to implement SSO and OAuth like described here. I was able to do it with a login button, so after clicking, it redirects to my app (if parameters are correct). However, I would like to have the process starting automatically while opening a page. (without any additional button). I assume that I can use useEffect. This is my code, but it creates an infinite loop. What would be the proper way of removing infinite loop here?

export function Auth() {
    useEffect(() => {
       window.open(getAuthorizeHref(), "_self");
        
    }, []);

    return <div />;
}

解决方案

The trick is that useEffect takes a second parameter
Please try the below example

useEffect(() => {
    window.open(getAuthorizeHref(), "_self");
}, []);

The second param is an array of variables that the component will check to make sure changed before re-rendering. You could put whatever bits of props and state you want in here to check against.

这篇关于如何在没有无限循环的情况下在 React 的 useEffect 钩子中使用 window.open()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！