循环对象以在React JS中创建引导行

因此,请考虑以下内容:

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>);
        }
      }
    }

    console.log(rows);
  }

我要做的是循环通过 characterSheet 对象并创建数组, rows 数组的: [[3 divs], [3 divs]] .

发生的是,在控制台里, [[3 divs]] 它循环并为前三个键创建分隔符,但不是最后三个键。

我肯定这太复杂了,但我不知道在这里该怎么做。

• 预期: [[3格],[3格]]
• 实际情况: [ [ 3个div] ]