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

Question

我想做一些我不知道该怎么做的事情，我想连续显示我的 Express 后端数据中的 4 个框，之后，我想跳到另一行并打印更多 4 个框，并报告，直到我到达 Api 的末尾。

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

这是我的代码，但问题是它显示了一行中的所有列（所有 114 列）并且它被弄乱了。

{this.state.api.map(api =>
    <a className="surah" href={api.link}>
        <p className="surah-counter">{aoi.id}</p>
        <div>
            <h2 className="surah-title-al">{api.sure}</h2>
            <h1 className="surah-title">{api.surah}</h1>
            <h3 className="ayah-number">{api.number}</h3>
        </div>
    </a>)}

我不知道该怎么做。

Answer 1

一个快速的方法是通过

{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>
  </>
)}

此代码所做的只是在数组BookData 中每4 个项目插入一个中断标记<br/>，将一长串项目分成多行。

主要是 {(index + 1) % 4 == 0 && <br/>} 行。

现在如果想将每 4 个元素包装成一个东西，比如 <div/>，你需要将 BookData 数组 (look at this question for that) 分成 4 个块，它们像这样循环遍历它，例如

{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/>
)}