如何在React中呈现特定数量的元素

Question

我正试图弄清楚如何显示用下面代码中的函数创建的特定数量的这些元素。我已经对此进行了研究，并看到大多数人都在使用数组，但我无法做到这一点，可能是因为我的jsx的某种格式。

import React from 'react';
import { videos } from '../../data/videos.json';
import styles from './covers.module.sass';
export const Covers = () => (
<div>
{videos.map((data, key) => {
return (
<Cover 
key={key}
cover={data.cover}
title={data.title}
subtitle={data.subtitle}
description={data.description}
/>
);
})}
</div>
);
const Cover = ({title, subtitle, description, cover}) => {
return (
<div className={styles.coverContainer}>
<img src={cover} alt={title + "cover image"} className={styles.coverImage} />
<div className={styles.coverWordsContainer}>
<h1 className={styles.coverTitle}>{title}</h1>
<h2 className={styles.coverSubtitle}>{subtitle}</h2>
<p className={styles.coverDescription}>{description}</p>
</div>
</div>
);
};
export default Covers;

Answer 1

根据我读到的评论，如果您的数组不符合您想要的长度，您似乎想要创建一些重复的元素。

我建议使用这样的函数：

function fillArray(arr, desiredLen) {
if (arr.length === desiredLen) {
return arr;
} else if (arr.length > desiredLen) {
return arr.splice(0, desiredLen);
} else {
const iterations = Math.round(desiredLen / arr.length);
let newArr = [];
for (let i = 0; i < iterations; i++) {
newArr = newArr.concat(arr);
}
return newArr.splice(0, desiredLen);
}
}

Answer 2

您可以尝试向我们显示videos数据

import { videos } from '../../data/videos.json'

视频数据格式可能有一些错误