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;

之前

我得到了

超出最大更新深度。组件时可能会发生这种情况反复调用componentWillUpdate中的setState或 componentDidUpdate。 React限制嵌套更新的数量防止无限循环。

错误....所以我的问题是......如何在完成所有循环并更新C1Count, C2Count, C3Count, C4Count, C5Count变量后更新状态。

Answer 1

当你setState()时，你将导致另一个渲染，因此你的无限循环。您不应该从setState致电render。其中一个lifecycle方法（componentDidMount等）根据您的需要会更好，如果这是组件的初始状态，则constructor。

Answer 2

默认情况下，React组件在其状态通过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 });
}

this.setState在array.map函数外部进行无限循环

2 个答案: