javascript - 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;

我得到一个

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

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

Answer 1

当您setState()时，您将导致另一个渲染，从而导致无限循环。您不应从 render 调用 setState。 lifecycle之一方法(componentDidMount 等)将是一个更好的位置，具体取决于您的需求或构造函数(如果这是组件的初始状态)。