React JS状態で配列をプッシュ/更新する

Question

React JSでの作業にかなり時間がかかりました。コンポーネント状態の一部である配列にアイテムをプッシュする際に問題があります。

私が起こそうとしているのは、コンポーネントが現在の月と次の2ヶ月間に毎日リストするように状態（allDays配列）を更新するときです。私はちょうど空の配列を取得しています。私はループをチェックして、それは日付を出力している、彼らはちょうど配列にプッシュされていない。

私の現在JavaScriptがある：

class CalendarDisplay extends React.Component { 

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

    findDays =() => { 

     var self = this; 

     var currentDate = new Date(); 
     var mFormat = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-01'; 

     var startBookingDate = moment(mFormat); 
     var endBookingDate = moment().add(2, 'M').endOf('month'); 

     var currentDate = moment(startBookingDate); 

     while (currentDate <= endBookingDate) { 

      self.setState({ 
       allDays: self.state.allDays.concat(moment(currentDate).format('YYYY-MM-DD')) 
      }); 

      currentDate = moment(currentDate).add(1, 'days'); 

     } 

    } 

    componentDidMount =() => { 

     this.findDays(); 
     console.log(this.state.allDays); 

    } 

    render =() => { 
     return (
      <div>Please See the Console Log</div> 
     ) 
    } 

} 

ReactDOM.render(
    <CalendarDisplay />, 
    document.getElementById('app') 
); 

は、ここで問題のJS Fiddleです。

私はStack Overflowに関する他の回答を読んできましたが、この問題ではうまくいかないようです。私は現在、成功せずにconcatテクニックを使用しようとしています。

助けがあれば助かります。

Answer 1

変更

self.setState({ 
       allDays: self.state.allDays.concat(moment(currentDate).format('YYYY-MM-DD')) 
      }); 

self.state.allDays.push(moment(currentDate).format('YYYY-MM-DD')); 

（コメントごとにeditted）に、あなたはそれらをCONCATない配列に値をプッシュする必要があります。

は、私はあなたがそのような状態を更新することはできません確信しているJsFiddle

Answer 2

を参照してください。エンド配列を完全に構築し、状態を更新する必要があります。このようにするもう1つの利点は、（30/31回ではなく）1回だけ状態を更新することです。

findDays =() => { 
    var month = []; 
    var self = this; 

    var currentDate = new Date(); 
    var mFormat = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-01'; 

    var startBookingDate = moment(mFormat); 
    var endBookingDate = moment().add(2, 'M').endOf('month'); 

    var currentDate = moment(startBookingDate); 

    while (currentDate <= endBookingDate) { 

     month.push(moment(currentDate).format('YYYY-MM-DD')); 

     currentDate = moment(currentDate).add(1, 'days'); 

    } 

    self.setState({ allDays: month); 

} 

Answer 3

パフォーマンスがあまり良くない状態は良いパターンではありません。言い換えれば、それは多くの場合renderを起動させることになります。

私の提案は、すべての値を一時変数に保持し、状態を1回だけ更新することです。

let days = [] 
while (currentDate <= endBookingDate) { 
    days = [...days, moment(currentDate).format('YYYY-MM-DD')] 
    currentDate = moment(currentDate).add(1, 'days') 
} 

this.setState({ allDays: days })