Javascript ReactJS:Express API和ReactJS结构限制每行显示数据

我想做一些我不知道如何做的事情，在一行中，我想从我的Express后端数据中显示4个框，然后，我想跳到另一行，打印更多的4个框，并报告，直到API结束

使用Express，我已经创建了我的API，它的数据列很小，只有114列（但我想在这个问题中使用112列），所以我想做的是打印一行4列，然后再次报告相同的状态

这是我的代码，但问题是它显示了一行中的所有列（全部114列），结果弄得一团糟

{this.state.BookData.map（BookData=>
)}

---

我不知道怎么做，每行显示4列。

一个快速的方法是

{this.state.BookData.map((BookData, index) =>
  <>
    {(index + 1) % 4 == 0 && <br/>}
    <a className="surah" href={BookData.link}>
        <p className="surah-counter">{BookData.id}</p>
        <div>
            <h2 className="custom-clax1">{BookData.sure}</h2>
            <h1 className="custom-clax2">{BookData.surah}</h1>
            <h3 className="custom-clax3">{BookData.number}</h3>
        </div>
    </a>
  </>
)}

---

因此，基本上，我想在4列中打印4次API，然后跳到下一行，直到被使用为止。感谢您的帮助，我很乐意解释如何分块数据，因为我是react和js新手。这就是为什么我把这个问题留给了一个解释这个问题的问题。解释如何将数组分块超出了这个问题的范围。是的，Diego我查过了，问题是这是react，是ExpressJS后端。react和Express都是javascript库，这意味着，对于普通javascript（如链接的问题所示）有效的任何东西，如果使用react或Express也有效。换句话说，

BookData

是一个普通的javascript数组，可以根据链接问题的内容进行分块。是的，但是如何从express和chunck获取数据以作出反应，或者我需要对expressjs执行此操作。

{chunckedBookData.map((bookDataChunk) =>
  <div class="custom-style-for-each-chunk">
    {bookDataChunk.map((BookData, index) =>
      <a className="surah" href={BookData.link}>
        <p className="surah-counter">{BookData.id}</p>
        <div>
            <h2 className="custom-clax1">{BookData.sure}</h2>
            <h1 className="custom-clax2">{BookData.surah}</h1>
            <h3 className="custom-clax3">{BookData.number}</h3>
        </div>
      </a>
    )}
  <div/>
)}