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

Question

希望正在阅读的人今天或晚上都过得愉快，考虑到他们是编码员 ;)

总之，还是看手头的问题吧。我最近在设置我的第一个应用程序时一直在深入研究新领域。我正在使用连接到 API 网关到运行后端的 React、AWS Amplify 和无服务器函数。

现在我的登录系统遇到了问题，它曾经完美地工作（除了 AWS amplify SDK 中的一个错误，该错误阻止了持续的用户授权），我能够登录并可以注册新帐户.但是，由于我无法保持登录状态，所以我在开发过程中添加了一些代码来绕过授权过程。现在我需要访问我的 API 中使用的用户对象，我删除了小绕过代码，现在每当我尝试加载负责身份验证的组件时，我都会收到超出最大深度的错误（见下文）。

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

我不知道我在这里做错了什么，我希望 Stack 上的聪明编码员能够帮助我，我在下面包含了身份验证组件以及 link 到我的 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;

GitHub 如果需要，可以添加额外的代码 :)

https://github.com/n-winspear/Stataflow

Answer 1

由于 React 路由器的部分匹配，/，匹配所有其他路由。

您可以像其他路线一样在 PrivateRoute 中添加 exact：

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

或者，如果您不想这样做，请将 PrivateRoute 移动到路线的末尾，如下所示：

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>
        );
    }

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

React Maximum Depth Exceeded (Unknown Reason)

javascript

reactjs

aws-amplify