如何将每个10行数据的列表划分，然后将下一个数据设置为React JS中的右列？

Question

我正在使用使用效率函数中获取待办事项列表数组数据，现在我想显示每列10个数据的结果，在一列中显示10个数据后，下一个数据将设置为右列。

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

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

i实际想要此输出。 在这里输入图像描述

这是我的fethed数据，我试图显示这样的数据。但是我无法显示每列10DATA：

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++;
}
}

您可以看到它的正确分配

沙盒