this.state内の配列のコンカットが機能しないのはなぜですか？

Question

私はキーdateの下に私のコンポーネントの状態にあり、私の配列の内部にレンダリングされた日付を追加しようとしているが、それは常に最初にまあ0

constructor(props) { 
    super(props); 
    this.state = { 
     dates: [] 
    } 
    } 

    componentWillMount() { 
    this.renderDateComp() 
    } 

    renderDateComp() { 
    for(var i = 0; i < 5; i++) { 
     var dat = new Date(Date().valueOf()); 
     dat.setDate(dat.getDate() + i); 
     this.setState({ dates: this.state.dates.concat(dat) }); 
     console.log(this.state.dates); //prints length of 0 
    } 
    } 

Answer 1

それを行うための推奨される方法は、することです：あなたは、最終的なdates配列を持って一度だけ後

1. コールsetState。
2. setStateのコールバックでログインthis.state.datesthis.stateが正しくリアクトによって更新された後に（それだけ呼び出されます。ここで注意すべき

キーポイントはsetStateが非同期であるということです。おそらくconsole.logする必要はありませんあなたの実際のコード内の配列。

はsetStatehere詳細についてはこちらをご覧ください。

constructor(props) { 
    super(props); 
    this.state = { 
    dates: [] 
    } 
} 

componentWillMount() { 
    this.renderDateComp() 
} 

renderDateComp() { 
    var dates = this.state.dates; 
    for (var i = 0; i < 5; i++) { 
    var dat = new Date(Date().valueOf()); 
    dat.setDate(dat.getDate() + i); 
    dates = dates.concat(dat); 
    } 
    this.setState({ 
    dates 
    },() => { 
    console.log(this.state.dates); //prints length of 5 
    }); 
} 

Answer 2

を返し、状態遷移が即時ではありません、彼らは非同期であります（ほとんどの場合）。状態を設定するたびに、変化のキューにその状態の変更が追加され、Reactはそのキューを介して継続的に作業し、それらの状態の変更をすべて実行するようなものだと考えてください。したがって、状態を変更すると、コードの次の行で直ちに状態が表示されます。状態の変更がリストに追加された後、直ちにconsole.logが発生するため、状態はおそらく変更されません。そのキューを通過しました。

第2に、forループの後の状態を設定する方がよいでしょう。したがって、5回ではなく、1回だけ設定するだけです。

Answer 3

setState（）のドキュメントを読む価値があります。 https://facebook.github.io/react/docs/react-component.html#setstate

変更をキューに入れますが、新しい値を何とか使用する場合はコールバックバージョンがあります。

this.setState((prevState, props) => { 
    return {myInteger: prevState.myInteger + props.step}; 
}); 

Answer 4

具体的には、あなたが行う場合は、この：

this.setState({ dates: this.state.dates.concat(dat) },() => console.log(this.state.dates)); 

あなたが期待している結果を得るでしょう。