反应，从具有特殊条件的对象数组中渲染div

Question

所以基本上，我想从特殊条件的对象数组中渲染div（每行将有6列div），如果数组有9个对象，则第一行将有6列div，然后第二行将有3栏divs。 数组是对象的数组。

So basically, I want to render divs from array of objects with special condition ( every rows will have 6 column divs), if the array have 9 objects, then the first row will have 6 column divs then the second row will have 3 column divs.
The array is an array of objects.

    let arrObj= [
      {
        "img": "/img/img.svg",
        "alt": "img1",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img2",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img3",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img4",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img5",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img6",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img7",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img8",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img9",
        "link": "https://home.com"
      }
    ] 

      const renderIcons = (i) => {
        const icon = arrObj[i];
        return (
          <div key={i} className="col-sm-6 col-md-4 img-container">
            <a href={icon.link} >
              <img src={icon.img} alt={icon.alt} />
              <p>{icon.alt}</p>}
            </a>
          </div>
        )
      } 
    const rowSize = 6;
      const rowIcons = []
      for (let i = 0; i < arrObj.length / rowSize; i++) {
        let iconsInRow = [];
        for (let n = 0; n < rowSize; n++) {
          iconsInRow.push(renderIcons(( n)))
        }
        rowIcons.push(<div key={i} className="row" >{iconsInRow}</div>)
      } 

// then render those icons on render()
<div> {rowIcons}</div> 

好吧，我最终得到了两行相似的列，并且我知道为什么会发生这种情况，在嵌套的for循环中，iconsInRow已被推送（iconsInRow -1）次。 所以我想要的是，如果数组有9个对象，则第一行将具有6列div，然后第二行将具有3列div。 请注意，arrObj是动态的，它的长度可以增加或减少。因此，我想为这种情况找到一个好的解决方案，欢迎任何解决方案。

已使用@Titus的解决方案更新

    const renderIcons = (i) => {
                     const icon =arrObj[i];
                     return (
                           <div key={i} className="col-sm-6 col-md-4 img-container">
                             <a href={icon.link} >
                               <img src={icon.img} alt={icon.alt} />
                               <p>{icon.alt}</p>
                            </a>
                          </div>
                      )
                   } 
            const rowSize = 6;
              const rowIcons = []
              for (let i = 0; i < arrObj.length / rowSize; i++) {
                let iconsInRow = [];
                for (let n = 0; n < rowSize; n++) {
                  let renderTimes = n + (i * rowSize);
                  renderTimes<arrObj.length &&
                     iconsInRow.push(renderIcons(renderTimes))
                }
                rowIcons.push(<div key={i} className="row" >{iconsInRow}</div>)
              }