呼び出しスタックの最大サイズを超えました。React-Redux

Question

エラーmaximum call stack size exceededがあります。多分私は間違った方法でcomponentDidUpdateを理解していますが、それは1000回ではなく、一度実行してはいけません。

class App extends Component { 
 

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

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

 
     if (comment.replyTo === null) { 
 

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

 
    componentWillMount() { 
 
    this.updateAmout(); 
 
    } 
 

 
    componentDidUpdate() { 
 
    this.updateAmout(); 
 
    } 
 

 
    render() { 
 
    console.log(this.state.amount); 
 
    return (
 
     <div className="comments-container"> 
 
     <div id="comments"> 
 
      <AddComment /> 
 
      <div className="comments-flow"> 
 
      <div className="comments-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

Answer 1

私の質問に対する答えが見つかりました。私はnextProps引数とcomponentDidUpdateメソッドの代わりにcomponentWillUpdateメソッドを使用する必要があります。

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

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

Answer 2

あなたは再レンダリング、componentDidUpdateで状態を変更するたびに非同期的にスローされます。 メソッドupdateAmountでは、状態を変更しています。 そしてそのメソッドをcomponentDidUpdateで呼び出すので、無限ループの再レンダリングを開始するので、この無限ループが最終的にjavascriptメモリを浪費します。

状態を更新する際の反応サイクルは次のとおりです。なぜあなたは無限ループに入ったのかを簡単に理解することができます。