Question

因此请考虑以下事项：

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]]会循环并为前三个键而不是最后三个键创建div。

我确信这太复杂了，但是我不确定在这里做什么。

预期： [[3 divs], [3 divs]]
实际： [[3 divs]]

Answer 1

我假设您想将各行分成3个div。如图所示，即使将来有六个以上的键，也可以使用一种更简单的方法。

基本上，将索引除以3得到第一个索引，然后将嵌套数组中的项目推入该索引。

即，对于键0,1,2，索引将为0 对于键3、4、5，索引将为1 等等...

renderCharacterSheetInfo() {
    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,
      };

      let rows = Object.keys(characterSheet).reduce((_rows,key,index) => {
        let rowIndex = Math.floor(index/3);
        if(!_rows[rowIndex]) {
            _rows[rowIndex] = []; //initialize with empty to push
        }

        _rows[rowIndex].push(<div className="col-md-4" key={key}>
 {characterSheet[key]} </div>)
        return _rows;
      },[]);

    console.log(rows);
  }
}

循环对象以在React js中创建引导程序行

1 个答案: