this.setState array.map関数の外で無限に見える

Question

私はいくつかのものをレンダリングするための配列マップ関数を持っています... 私は0から始まる5つの変数を持っていて、各変数値は1私は...}).reverse();とBEF後SETSTATEコードを置くと5つの状態

this.setState({ 
C1Count:C1Count, // state : variable value 
C2Count:C2Count, // state : variable value 
C3Count:C3Count, // state : variable value 
C4Count:C4Count, // state : variable value 
C5Count:C5Count // state : variable value 
}); 

を更新したい。

renderUser = (index)=>{ 
    let C1Count = 0, C2Count = 0, C3Count = 0, C4Count = 0, C5Count = 0; 
    let users = this.state.users.map((user,index)=>{ 

    // swiching some value , that is from 0 to 4 

    switch(this.state.users[index].result){ 
     case 0: { C1Count += 1; break; } 
     case 1: { C2Count += 1; break; } 
     case 2: { C3Count += 1; break; } 
     case 3: { C4Count += 1; break; } 
     case 4: { C5Count += 1; break; } 
     default: { console.log("non"); break; }; 
    } 
    return(
     ....stuff to render 
        ) 


    }).reverse(); 



    return users; 

}

鉱石..return users;

は私が

最大更新深さを超えて取得します。これは、コンポーネント がcomponentWillUpdate内でsetStateを繰り返し呼び出すか、またはcomponentDillUpdate内で componentDidUpdateを繰り返し呼び出すときに発生します。 Reactは、ネストされた更新の数を に制限し、無限ループを防ぎます。

エラーが....だから私の質問は...どのように状態を更新するのですか？すべてのループが終了し、C1Count, C2Count, C3Count, C4Count, C5Count変数が更新された後。

Answer 1

setState()とすると、別のレンダリングが発生し、無限ループになります。 setStateはrenderに電話しないでください。 lifecycleメソッドの1つ（componentDidMountなど）は、必要に応じてより良い場所になります。これがコンポーネントの初期状態である場合はconstructorです。

Answer 2

デフォルトでは、状態がsetState()で変更されたときにリアクションコンポーネントが再レンダリングされるため、render()は純粋な機能（状態を変更しない）にする必要があります。

あなたのケースでは、Count変数は状態から派生しているので、実際に値を保持する必要はありません。代わりに、その値を計算する関数を作成することができます：

getCounts() { 
    return this.state.users.reduce((counts, user) => { 
    switch (user.result) { 
     case 0: 
     counts.C1Count++; break; 
     case 1: 
     counts.C2Count++; break; 
     case 2: 
     counts.C3Count++; break; 
     case 3: 
     counts.C4Count++; break; 
     case 4: 
     counts.C5Count++; break; 
     default: 
     console.log("non"); 
    } 

    return counts; 
    }, { C1Count: 0, C2Count: 0, C3Count: 0, C4Count: 0, C5Count: 0 }); 
}