javascript - Maximum call stack size exceeded React-Redux - Stack Overflow

admin管理员组

文章数量:1303551

I have error maximum call stack size exceeded. Maybe I in wrong way understand ponentDidUpdate, but shouldn't it's run one time, instead 1000. How fix it?

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      amount: 0
    }
  }

  updateAmout() {
    let number = 0;
    this.propsments.map((ment, index) => {

      if (ment.replyTo === null) {

        number += 1;
        this.setState({amount: number});
      }
      return null;
    });
  }

  ponentWillMount() {
    this.updateAmout();
  }

  ponentDidUpdate() {
    this.updateAmout();
  }

  render() {
    console.log(this.state.amount);
    return (
      <div className="ments-container">
        <div id="ments">
          <AddComment />
          <div className="ments-flow">
            <div className="ments-header">
              <div className="pull-right">
                <a href="" className="text-muted">Best</a> |
                <a href="" className="active">Newest</a> |
                <a href="" className="text-muted">Oldest</a>
              </div>
              <b>6 Comments</b>
            </div>
            <RenderComments />
          </div>
          <button className="btn btn-block">More...</button>
        </div>
      </div>

    ) // return
  } // render
} // App

I have error maximum call stack size exceeded. Maybe I in wrong way understand ponentDidUpdate, but shouldn't it's run one time, instead 1000. How fix it?

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      amount: 0
    }
  }

  updateAmout() {
    let number = 0;
    this.props.ments.map((ment, index) => {

      if (ment.replyTo === null) {

        number += 1;
        this.setState({amount: number});
      }
      return null;
    });
  }

  ponentWillMount() {
    this.updateAmout();
  }

  ponentDidUpdate() {
    this.updateAmout();
  }

  render() {
    console.log(this.state.amount);
    return (
      <div className="ments-container">
        <div id="ments">
          <AddComment />
          <div className="ments-flow">
            <div className="ments-header">
              <div className="pull-right">
                <a href="" className="text-muted">Best</a> |
                <a href="" className="active">Newest</a> |
                <a href="" className="text-muted">Oldest</a>
              </div>
              <b>6 Comments</b>
            </div>
            <RenderComments />
          </div>
          <button className="btn btn-block">More...</button>
        </div>
      </div>

    ) // return
  } // render
} // App

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow edited Jul 10, 2017 at 22:40 Rami Chasygov asked Jul 10, 2017 at 22:10 Rami ChasygovRami Chasygov 2,7841010 gold badges2626 silver badges3939 bronze badges 2

• 1 ponentWillMount will force an update which will trigger ponentDidUpdate which will force again an update and so on. – MinusFour Commented Jul 10, 2017 at 22:17
• 1 ponentDidUpdate() is a callback to notify you that the state update was finished successfully. You should not trigger another state update here. – Code-Apprentice Commented Jul 10, 2017 at 22:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Each time you modify state in ponentDidUpdate, a re-render is thrown asynchronously. In your method updateAmount, you are modifying the state. And you are calling that method in ponentDidUpdate, so you initiate an infinite loop of re-renders, so this endless loop created finally wastes the javascript memory.

The React cycle when updating the state is the following one. So you can easily understand why you enter into an endless loop.

I found the answer to my question. I need to use the nextProps argument and the method ponentWillUpdate instead of the ponentDidUpdate method.

// before
ponentDidUpdate() {
 this.updateAmout();
}

// after
ponentWillUpdate(nextProps) {
  if (!_.isEqual(this.props, nextProps)) {
    this.updateAmout();
  }
}

本文标签： javascriptMaximum call stack size exceeded ReactReduxStack Overflow