React：既存の状態遷移エラー中に更新できません

Question

私のためにTimelistを生成する関数があります。レンダリングを開始すると、メソッドが呼び出され、状態が表示されます。それは表示されますが、コンソールは、複数のエラーを投げている：

setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. 

私のコードは次のようになります。

import React, { Component } from 'react'; 


export default class Timeline extends Component { 
    constructor(props) { 
     super(); 
      this.state = { 
       timeList: 'aa' 
      }; 
     } 


     generateTimelineArray(start = 1499162400, end = 1499248800, step = 60) { 
     let arr =[]; 
     for(let i = start; i <= end;i+=step) { 
     const date = new Date(i); 
     const hours = date.getHours(); 
     const mins = date.getMinutes(); 
     arr[i] = { 
      time: hours + ":" + mins, 
      hour: hours, 
      minutes: mins 
     }; 
     } 
    this.setState({ timeList: 'bb'}); 
     this.setState({ timeList: 'bb'}); 

    } 


    render() { 


{this.generateTimelineArray()} 
    return (
     <div className="App" > 
     {this.state.timeList} 
     </div> 
    ); 
    } 
} 

generateTimelineArray

は、指定された引数トラフをループして、配列を作成しています。後で別のコンポーネントにマップしたいと思っています。たとえば、文字列に変更しました。

エラーの原因とその原因をどのように修正する必要がありますか？

Answer 1

this.setStateは、エラーと同じようにrenderサイクル以内に電話をかけることはできません。代わりにcomponentWillReceivePropsライフサイクルのgenerateTimelineArrayをのfunctionで呼び出すのはなぜですか？または、おそらくcomponentWillMountの機能の間に変化している状態が表示されない場合です。

これは、状態の変化に「反応する」ために、新しいコンポーネントの状態を構築するのに適しています。あなたは常に私は彼らがハードコードされているこの場合には、レンダリングし

Facebook Documentation on React Lifecycle - componentWillReceiveProps