时间戳

首页 > 解决方案 > 超过反应最大深度（未知原因）

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

问题描述

希望任何正在阅读的人都度过了美好的一天，或者考虑到编码人员的夜晚；）

无论如何，归结为手头的问题。最近，在设置我的第一个应用程序时，我一直在深入研究新领域。我正在使用连接到 API Gateway 的 React、AWS Amplify 和无服务器函数来运行后端。

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

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

我不知道我在这里做错了什么，我希望 Stack 上的一个聪明的编码人员能够帮助我，我在下面包含了 Authentication 组件以及一个指向我的 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

标签： javascriptreactjsaws-amplify

解决方案

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

您可以添加exact您PrivateRoute喜欢的其他路线：

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

推荐阅读