Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140611

Maximum update depth exceed error. What could be wrong here?

$
0
0

I need help here.

I've already found a similar question here in StackOverflow (Similar Question)

I've read and try to figure out what could be wrong with my code. I'm a little bit new as a developer and I'm still learning how to debug a code, so please sorry if the answer is pop uping in my face but I really need a clarity here.

I'm developing a project in React-Redux, and when I try to load the App it shows the error of the title.

I suspect that the error is in my App.js. There go below part of the code:


class App extends Component {  

  resetActiveIndexToZero = () => {
    this.setState({ activeIndex: 0 })
  }

  componentDidMount() {
    const { handleInitialData } = this.props
    handleInitialData()
  }

  render() {
    const { isAuthenticated } = this.props    

    return (
      <BrowserRouter>
          <Fragment>
            <LoadingBar style={{ zIndex: 1000 }} />            
            {isAuthenticated && <Menu />}
            <div className='ui main text container' style={{ marginTop: '7em' }}>
              <Switch>
                <Route path='/' exact component={RequiresAuth(QuestionList)} />
                <Route path='/add' component={QuestionNew} />
                <Route path='/login' component={Login} />
                <Route path='/questions/:question_id' component={RequiresAuth(QuestionView)} />
                <Route path='/leaderboard' component={RequiresAuth(Leaderboard)} />                                                     
                <Route path='/logout' component={Logout} />                   
                <Route path='/404' component={PageNotFound} />                          
              </Switch>
            </div>
            <Footer />
          </Fragment>
      </BrowserRouter>         
    )
  }  
}

const mapStateToProps = (state) => {
    const { authedUser } = state
    return { isAuthenticated: authedUser !== null }
}

I've tried some things, without success.

What could be wrong with this code?

Any ideas?

Thanks in advance.

UPDATE 1

Here is the code of the archive RequiresAuth.js, as commented in an answer below:


import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Redirect } from 'react-router'

export default function (ComposedComponent) {
    class RequiresAuth extends React.Component {
        static propTypes = {
            isAuthenticated: PropTypes.bool            
        }

        render() {
            return (
                <div>
                    {this.props.isAuthenticated ? <ComposedComponent {...this.props} /> 
                    : <Redirect to={{ pathname: '/login', state: { referrer: window.location.pathname}}} />}                   
                </div>
            )
        }    
    }

    const mapStateToProps = (state) => {
        return {
            isAuthenticated: state.authedUser !== null
        }
    }    

    return connect(mapStateToProps)(RequiresAuth)

UPDATE 2

Here is the codesandbox: https://sit9d.csb.app/login


Viewing all articles
Browse latest Browse all 140611

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>