如何在 React Js 中每 10 行数据划分 table 列然后下一个数据集到右列？

Question

我正在 useEffect 函数中获取 to-do 列表数组数据，现在我想显示每列 10 个数据的结果，在一列中显示 10 个数据后，下一个数据将设置到右列。

例如：我有 22 个标题。前 1-10 个标题将显示在第一列中，然后 11-20 个标题将显示在第二列中，然后 21-30 个标题将显示在其他列中。

arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21, 22,23]

我真的想要这个输出。 enter image description here

这里是我的数据，我试过这样显示。但我无法每列显示 10 个数据：

import React, { useEffect, useState } from 'react';


const Home = () => {

const [collection, setCollection] = useState([]);

useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
        .then(response => response.json())
        .then(json => {
            setCollection(json);
            // console.log(json)
        })
}, []);

let modified_collection = [];
if (collection.length > 0) {
    modified_collection = collection.reduce((rows, key, index) => {
        return ((index % 11 !== 10
            ? rows.push([key])
            : rows[rows.length - 1].push(key))
            && rows);
    }, []);
}

console.log(modified_collection);

return (
    <div  >
        {modified_collection.map((row, index) => (
            <div key={index} className='row mt-3'>
                {row.map((col, index) => (
                    <div key={index} className="col">
                        <div className='card ' >
                            <p> {col.title}</p>
                        </div>
                    </div>
                ))}
            </div>
        ))}
    </div>
)
}


export default Home

Answer 1

我用适当的 css 创建了一个简单的例子来演示你的 html

问题是你的数组分裂。

试试这个

if (collection.length > 0) {
let numberOfColumns = collection.length / 10;

if (collection.length % 10 > 0) {
  numberOfColumns++;
}

let index = 0;
for (let i = 0; i < collection.length; i++) {
  if (index % numberOfColumns == 0) {
    index = 0;
  }

  if (!modified_collection[index]) {
    modified_collection[index] = [];
  }

  modified_collection[index].push(collection[i]);
  index++;
}
}

沙箱中可以看到分割正确

sandbox

如何在 React Js 中每 10 行数据划分 table 列然后下一个数据集到右列？

How to divide column table per 10 row data then next data set to the right column in React Js?

reactjs

mapping

multiple-columns