this.setState在array.map函數之外進行無限循環

Question

我有此數組映射函數用於渲染某些內容...我有5個從0開始的變量，並且根據switch語句，每個變量的值都增加1。

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;

}

我想更新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
});

如果我將setState代碼放在...}).reverse(); 和..return users;之前..return users;

我得到一個

超過最大更新深度。 當組件重復調用componentWillUpdate或componentDidUpdate內部的setState時，可能會發生這種情況。 React限制了嵌套更新的數量，以防止無限循環。

錯誤..所以我的問題是...在所有循環完成並更新C1Count, C2Count, C3Count, C4Count, C5Count變量后如何更新狀態。

Answer 1

當您setState() ，您將導致另一個渲染，從而導致無限循環。 您不應該從render調用setState 。 如果這是組件的初始狀態，則根據您的需要或constructor ，使用生命周期方法之一（componentDidMount等）會更好。

Answer 2

默認情況下，當通過setState()更改其狀態時，React Component將重新渲染，這就是為什么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 });
}