在 React 中将对象内的数组列表渲染为最多包含四个项目的 div

Question

我有一个这样的对象：

export const dataEstrenos = [
    {
      id: 1, product: "any product", title: "any title"
    },
    {
      id: 2, product: "any product", title: "any title"
    },
    {
      id: 3, product: "any product", title: "any title"
    },
    {
      id: 4, product: "any product", title: "any title"
    },
    {
      id: 5, product: "any product", title: "any title"
    },
    {
      id: 6, product: "any product", title: "any title"
    },
    {
      id: 7, product: "any product", title: "any title"
    }  
  ];

我想在容器 div 内以四个元素为一组的形式显示项目，如下所示：

<div>
    <div>Here data from first item</div>      
    <div>Here data from second item</div>      
    <div>Here data from third item</div>      
    <div>Here data from fourth item</div> 
</div>
<div>      
    <div>Here data from fifth item</div>      
    <div>Here data from sixth item</div>     
    <div>Here data from seventh item</div>
</div>

...对象内的项目可以是任意数量，最后一个容器 div 可能没有四个项目，具体取决于数组/对象中剩余的项目数量（如上面的示例）。

我怎样才能在反应中实现这一目标？我是 React 新手，所以我实现这一目标的尝试不值得在这里展示。谢谢！

Answer 1

我首先将数组拆分为子数组。如果您有一个最喜欢的实用程序库，它可能具有此功能，例如 Lodash 的 chunk 或 Ramda 的 splitEvery。或者你可以自己写。

const createChunks = (array, size) => {
  const chunks = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }
  return chunks
}

// In your component:
const chunks = createChunks(dataEstrenos, 4);

之后，像这样映射数组：

return (
  <>
    {chunks.map((chunk) => (
      <div>
        {chunk.map((item) => (
          <div>Here data from item. Eg, {item.title}</div>
        ))}
      </div>
    ))}
  </>
);