Javascript 超出反应最大深度（未知原因）

希望正在阅读的人白天或晚上都过得很愉快，因为他们都是程序员；）

不管怎样，归结到手头的问题。最近，在设置第一个应用程序时，我一直在深入研究新领域。我正在使用连接到API网关的React、AWS Amplify和serverless函数来运行后端

现在我的登录系统出现了问题，它过去工作得很好（除了AWS amplify SDK中的一个bug阻止了持久的用户授权），我能够登录并注册新帐户。然而，由于我无法保持登录状态，我在开发过程中添加了一些代码以绕过授权过程。现在我需要访问用户对象以便在我的API中使用，我删除了小旁路代码，现在每当我尝试加载负责身份验证的组件时，我都会得到一个最大深度超出错误（见下文）

我已经把它缩小到我的身份验证组件，因为我可以一直控制日志注释，直到身份验证的构造函数结束。问题似乎出现在调用Auth之后的componentDidMount（）函数中（请参见下面的注释），但是如果注释掉整个函数，仍然会出现相同的错误

我不知道我在这里做错了什么，我希望堆栈上的一位明智的程序员能够帮助我，我已经在下面包含了身份验证组件，以及一个指向我的Github的链接，如果您需要，它包含了代码的其余部分

如果你需要什么，请问任何问题

提前感谢正在阅读的人：）

身份验证组件

// Modules
import React from 'react';
import {Auth} from 'aws-amplify';
import {BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
import Application from 'components/pages/Application';
import Login from 'components/pages/Login';
import Register from 'components/pages/Register';

class Authentication extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            email: '',
            password: '',
            phone_number: '',
            confirmcode: '',
            user: null,
            isAuthenticated: false
        }

        this.handleFormInput = this.handleFormInput.bind(this);
        this.setAuthenticated = this.setAuthenticated.bind(this);
    }

    async componentDidMount() {
        if (!this.state.isAuthenticated) {
            try {
                const CAURes = await Auth.currentAuthenticatedUser({bypassCache: true});
                let user = {
                    username: CAURes.username,
                    ...CAURes.attributes
                }
                if (user.email_verifed) {
                    this.setState({user: user, isAuthenticated: true});
                }
            } catch (error) {
                console.error(error);
            }
        }
    }

    handleFormInput(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    setAuthenticated() {
        this.setState({
            isAuthenticated: true
        });
    }

    render() {
        return (
            <Router>
                <Switch>
                    <PrivateRoute path='/'
                        component={Application} isAuthenticated={this.state.isAuthenticated} userData={this.state.user} />
                    <Route exact path='/login'
                        render={(props) => <Login {...props} handleFormInput={this.handleFormInput} formInputs={this.state} setAuthenticated={this.setAuthenticated} />} />
                    <Route exact path='/register'
                        render={(props) => <Register {...props} handleFormInput={this.handleFormInput} formInputs={this.state} setAuthenticated={this.setAuthenticated} />} />
                </Switch>
            </Router>
        );
    }
}

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => {
    return(
        <Route {...rest} render={(props) => {
            return(
                isAuthenticated === true
                ? <Component {...props} {...rest} />
                : <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }} />
            )
        }}/>
    );
}

export default Authentication;

//模块
从“React”导入React；
从'aws amplify'导入{Auth}；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Redirect}；
从“组件/页面/应用程序”导入应用程序；
从“组件/页面/登录”导入登录；
从“组件/页面/寄存器”导入寄存器；
类身份验证扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
电子邮件：“”，
密码：“”，
电话号码：''，
确认代码：“”，
用户：null，
I验证：错误
}
this.handleFormInput=this.handleFormInput.bind（this）；
this.setAuthenticated=this.setAuthenticated.bind（this）；
}
异步组件didmount（）{
如果（！this.state.isAuthenticated）{
试一试{
const CAURes=wait Auth.currentAuthenticatedUser（{bypassCache:true}）；
让用户={
用户名：CAURes.username，
…原因
}
if（user.email\u verified）{
this.setState（{user:user，isAuthenticated:true}）；
}
}捕获（错误）{
控制台错误（error）；
}
}
}
handleFormInput（事件）{
这是我的国家({
[event.target.name]：event.target.value
});
};
setAuthenticated（）{
这是我的国家({
我被证实：是的
});
}
render（）{
返回(
} />
} />
);
}
}
const PrivateRoute=（{component:component，isAuthenticated，…rest}）=>{
返回(
{
返回(
isAuthenticated==真
? 
: 
)
}}/>
);
}
导出默认身份验证；

GitHub，如果需要，提供附加代码：）

---

由于React路由器的部分匹配，

/

匹配所有其他路由

您可以像其他路线一样，在

privaterote

中添加

exact

：

<PrivateRoute exact path='/' ... >

---

非常感谢你，这已经解决了。我觉得有点傻，我没有注意到，但它现在似乎正在工作。很高兴它起了作用！：）

render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/login'
                        render={(props) => <Login {...props} handleFormInput={this.handleFormInput} formInputs={this.state} setAuthenticated={this.setAuthenticated} />} />
                    <Route exact path='/register'
                        render={(props) => <Register {...props} handleFormInput={this.handleFormInput} formInputs={this.state} setAuthenticated={this.setAuthenticated} />} />
                    <PrivateRoute path='/'
                        component={Application} isAuthenticated={this.state.isAuthenticated} userData={this.state.user} />
                </Switch>
            </Router>
        );
    }