Reactjs 带有MSAL库React样本的无限循环

我正在尝试无缝地登录用户，而不需要登录按钮，因为它将托管在Azure上。但以错误的无限循环结束：

正在进行交互：交互当前正在进行。
请确保在调用交互API之前已完成此交互。
有关更多信息，请访问：aka.ms/msaljs/browser-errors。

示例页面布局代码修改的Typescript示例来自：

export const PageLayout=（道具：任意）=>{
const{instance，accounts，inProgress}=useMsal（）；
if（instance.getActiveAccount（）==null）
{
log（'account='+instance.getActiveAccount（））；
实例.loginRedirect（loginRequest）；
}
log（'count='+instance.getAllAccounts（）.length）；
log（'active='+instance.getAllAccounts（））；
返回(
{/*  */}
欢迎使用Microsoft Typescript身份验证库-React Quickstart




{props.children}
);
};

export const PageLayout = (props: any) => {
    const { instance,accounts,inProgress } = useMsal();
    if(instance.getActiveAccount() == null)
    {
        console.log('account =' + instance.getActiveAccount());
        instance.loginRedirect(loginRequest);
    }
    console.log('count =' + instance.getAllAccounts().length);
    console.log('active =' + instance.getAllAccounts());
    return (
        <>
            <Navbar bg="primary" variant="dark">
                <a className="navbar-brand" href="/">MS Identity Platform</a>
                {/* <SignInSignOutButton/> */}
            </Navbar>
            <h5 className="sample-header">Welcome to the Microsoft Authentication Library For Typescript - React Quickstart</h5>
            <br/>
            <br/>
            {props.children}
        </>
    );
};