Maximum call stack size exceeded - Connected React Component

Asked
Active3 hr before
Viewed126 times

7 Answers

stackcomponentreact
90%

You are calling getTabs method from render, and doing setState inside that, setState will trigger re-rendering, again getTabs ..... Infinite loop.,Remove setState from getTabs method, it will work.,Because of this loop:, that's not it, I've tried commenting out setState in getTabs, doesn't make a difference – PositiveGuy Aug 22 '17 at 17:17

Because of this loop:

  render-- -- - > getTabs-- -- - > setState-- -- -
  ^
  |
  |
  |
  |
  ____________________________________________v
load more v
88%

Maximum call stack size exceeded - Connected React Component ,Maximum call stack size exceeded,const tabs = this.getTabs(breakpoints, panels, selectedTab); ,When this code is run. If I comment out:

Code (removed the extra functions):

export default class SearchTabs extends Component {
  constructor() {
    super();
    this.state = {
      filters: null,
      filter: null,
      isDropdownOpen: false,
      selectedFilter: null,
    };

    this.getTabs = this.getTabs.bind(this);
    this.tabChanged = this.tabChanged.bind(this);
    this.setSelectedFilter = this.setSelectedFilter.bind(this);

    this.closeDropdown = this.closeDropdown.bind(this);
    this.openDropdown = this.openDropdown.bind(this);
  }

  componentDidMount() {
    const { panels } = this.props;
    if (!panels || !panels.members || panels.members.length === 0) {
      this.props.fetchSearch();
    }
  }


  getTabs(breakpoints, panels, selectedTab) {
    const tabs = panels.member.map((panel, idx) => {
      const { id: panelId, headline } = panel;
      const url = getHeaderLogo(panel, 50);
      const item = url ? <img src={url} alt={headline} /> : headline;

      const classname = classNames([
        searchResultsTheme.tabItem,
        (idx === selectedTab) ? searchResultsTheme.active : null,
      ]);

      this.setState({ filter: this.renderFilters(
        panel,
        breakpoints,
        this.setSelectedFilter,
        this.state.selectedFilter,
        this.state.isDropdownOpen,
      ) || null });

      return (
        <TabItem
          key={panelId}
          classname={`${classname} search-tab`}
          headline={headline}
          idx={idx}
          content={item}
          onclick={this.tabChanged(idx, headline)}
        />
      );
    });

    return tabs;
  }

  render() {
    const { panels, selectedTab } = this.props;

    if (!panels || panels.length === 0) return null;

    const tabs = this.getTabs(breakpoints, panels, selectedTab);

    return (
      <div className={searchResultsTheme.filters}>
        <ul className={`${searchResultsTheme.tabs} ft-search-tabs`}>{tabs}</ul>
        <div className={searchResultsTheme.dropdown}>{this.state.filter}</div>
      </div>
    );
  }
}

export const TabItem = ({ classname, content, onclick, key }) => (
  <li key={key} className={`${classname} tab-item`} onClick={onclick} >{content}</li>
);
load more v
72%

Hey, HelmetWrapper uses deepEqual to compare props and of course, there are react children components with endless amount of nested objects. This seems like a dangerous way to check props equality. Could we turn HelmetWrapper into PureComponent?,@jaredLunde this error happens because ReactHelmet compares props with deepEqual and when there are children in props it iterate over children as well and since those children are React components (not a plain objects) it simply overflows the stack. The workaround is to avoid providing any children to <Helmet/> component, but anyway, deepEqual is still bad.,Please everyone, give @tmbtech a rest or pay him money for working on this issue. Everyone can fork this lib and patch the code or switch to react-helmet-async or use an object for configuration. There are a lot of alternatives.,The work around for us was to not use react children to pass in <meta> <title> tags, and use the props way:

<Helmet
  title={pageTitle}
  meta={[
  {
    name: 'description',
    content: pageDescription,
   },
   ]}
/>
load more v
65%

.on('touchstart.dropdown.data-api', '.dropdown-menu', function(e) {
   e.stopPropagation()
})
75%

The source code is here,the error blow occurred, please help.,And here’s the source code:,Feeling stuck on this – if anyone has any ideas, please help.

In the below example, calling the API with a valid slug/parameter, like:

      let podcastDataResponse = await context.$axios.get('/podcast-episodes/' + podcastSlug);

However, if I pass an invalid slug to the API endpoint, such that the API returns a 404 (NOT Json), like:

      let podcastDataResponse = await context.$axios.get('/podcast-episodes/' + 'notfound');

Nuxt seems to crap out…and I see an error:

RangeError
Maximum call stack size exceeded

Here’s the code:

  async asyncData(context) {
     try {
        let podcastSlug = context.params.slug;
        let podcastDataResponse = await context.$axios.get('/podcast-episodes/' + podcastSlug);
        console.log('podcastDataResponse', podcastDataResponse)
        // let podcastData = podcastDataResponse.data.data;
        return {}
     } catch (error) {
        console.error(error);
        context.error(error);
     }

  },
load more v
40%

Memory leak caused by infinitely dispatching Redux actions: Luckily, we had the Redux dev tools installed, as this did not cause a “Maximum call stack size exceeded” error; it simply froze up the tab and required us to force quit and restart.,When implementing this in React Router v4, you DO NOT want to follow this pattern of referencing a function call within a React Router route and passing a component into that HOC function. We were perplexed at first, as this seems to be a widely recommended approach for protecting views within routing. ,Some of the symptoms we saw before finally diagnosing the issue included:,We hope this helps when you eventually have to implement protected routes with React and React Router v4. Additionally, we weren’t able to explain exactly why including an HOC in the component prop caused this infinite loop, so please leave a comment or Tweet at us @Cuttlesoft if you know why this happens or have a more elegant way of implementing this feature.

From Josh’s example in the routes/index.js, it is this line of code:

<Route path="protected" component={requireAuthentication(ProtectedView)}/>
22%

import React, {Component} from react ; import Demo1 from . demo1.js import . App.css import {BrowserRouter as Router, Route} from react-router-dom ; import A from . main a.js import B from . main b.js import C from . ..., React-router 4.2 question import React, {Component} from react ; import Demo1 from . demo1.js import . App.css import {BrowserRouter as Router, Route} from react-router-dom ; import A from . main a.js import B from . main b.js import C from . ... React-router4 react.js Mar.14,2021 , React router4.0 routing nesting Code first as a token of respect const routes = [ { path: , exact: true, component: Main, }, { path: company , exact: true, component: CompanyIntroduce, routes:[ ... React-router4 react.js react-router Feb.28,2021 , React + dva 2.1 react+dva2.1 version, how to make a front-end route interceptor function RouterConfig ({history, app}) { const routes = [ { path: user , models: () => [import( . models user )], component: () => import( . routes index ), }, { pat... React-router4 node.js Feb.28,2021

import React, { Component } from "react"
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"

import Path from "../containers/page"
import Login from "../containers/login"

const LoginRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render = {
        props => 0 ? 
        (
            <Component {...props} />
        ) : (
            <Redirect to={{
                pathname: "/login",
                state: {from: props.location}
            }} />
        )
    } /> 
)

class Routes extends Component {
    render () {
        return (
            <Router>
                <Switch>
                    <LoginRoute exact component={Path} path="/" />
                    <LoginRoute component={Login} path="/login" />
                </Switch>
            </Router>
        )
    }
}

export default Routes

Other "stack-component" queries related to "Maximum call stack size exceeded - Connected React Component"