React循环对象生成Bootstrap行时数据丢失问题求助

嘿，我一眼就看出问题所在啦！你的代码逻辑里，只有当rowCount达到3的时候才会把当前的elements数组推入rows，但循环结束后，最后一组（也就是第4-6个元素）已经存在elements里了，却没有被手动添加到rows中——因为循环已经跑完，不会再触发else分支的push操作了。

问题分析 #

你的characterSheet有6个属性，前3个会被正常推入rows，但处理第4个元素时，会把前3个的elements推入rows，然后重置rowCount和elements，接着添加第4个元素。之后处理第5、6个元素时，rowCount会变成2，循环结束，此时elements里已经有3个元素（第4-6个），但没有被加入rows，所以最终rows只有一组数据。

解决方案 #

方案一：在循环结束后补充推送剩余元素

只需要在循环外面加一段判断，把还没推送的elements加入rows即可，修改量很小：

renderCharacterSheetInfo() { 
  let rows = []; 
  let elements = []; 
  let rowCount = 0; 
  if (!this.state.loading) { 
    const characterSheet = { 
      strength: this.state.characterSheet.base_strength, 
      dexterity: this.state.characterSheet.base_dexterity, 
      agility: this.state.characterSheet.base_agility, 
      intelligence: this.state.characterSheet.base_intelligence, 
      health: this.state.characterSheet.base_health, 
      gold: this.state.characterSheet.gold, 
    }; 
    for(const key in characterSheet) { 
      if (rowCount < 3) { 
        elements.push(<div className="col-md-4" key={key}>{characterSheet[key]}</div>); 
        rowCount++; 
      } else { 
        rows.push(elements); 
        rowCount = 0; 
        elements = []; 
        elements.push(<div className="col-md-4" key={key}>{characterSheet[key]}</div>); 
        rowCount++; // 这里别忘了递增计数，不然下一个元素会重复判断
      } 
    }
    // 循环结束后，把剩余的元素组加入rows
    if (elements.length > 0) {
      rows.push(elements);
    } 
  } 
  console.log(rows); 
}

方案二：先收集所有元素再分组（更简洁推荐）

这种方法先把所有需要的React元素生成好，再用数组切片的方式分成每3个一组，逻辑更清晰，不容易出错：

renderCharacterSheetInfo() { 
  let rows = []; 
  if (!this.state.loading) { 
    const characterSheet = { 
      strength: this.state.characterSheet.base_strength, 
      dexterity: this.state.characterSheet.base_dexterity, 
      agility: this.state.characterSheet.base_agility, 
      intelligence: this.state.characterSheet.base_intelligence, 
      health: this.state.characterSheet.base_health, 
      gold: this.state.characterSheet.gold, 
    }; 
    // 先把所有属性转换成React元素数组
    const allElements = Object.entries(characterSheet).map(([key, value]) => (
      <div className="col-md-4" key={key}>{value}</div>
    ));
    // 每3个元素切分成一组，推入rows
    for (let i = 0; i < allElements.length; i += 3) {
      rows.push(allElements.slice(i, i + 3));
    }
  } 
  console.log(rows); 
}

两种方案都能解决你的问题，方案二更简洁易读，推荐使用哦～

内容的提问来源于stack exchange，提问作者TheWebs