反应应用程序如何仅显示有限数量的数组项答案

【问题标题】：React app how to show only limited number of array items反应应用程序如何仅显示有限数量的数组项
【发布时间】：2022-11-08 16:16:54
【问题描述】：

我有 data.js 文件，其中包含有关 T 恤、连帽衫、箱子等的信息。我在每个数组中有 5 个对象。如果我在 HomeScreen.js 上调用每个数组，它会显示数组包含的所有对象。

如何让每个数组在某个页面上显示特定数量的对象？例如，在主屏幕中应该显示 2，但在另一个页面上应该显示全部 5。

这是我调用 data.js 数组的表：

   <span className="productstitle">Featured T-Shirts</span>
        <a href={`/category/tshirts`} className="browseall">All designs &gt;</a>


        <table className="maintable">
            {data.tshirts.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}
            
        <p className='featuredtext'><span className="productstitle">Featured Hoodies</span>
        <a href={`/category/hoodies`} className="browseall">All designs &gt;</a></p>

            {data.hoodies.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}

        <p className='featuredtext'><span className="productstitle">Featured Phone Cases</span>
        <a href={`/category/cases`} className="browseall">All designs &gt;</a></p>

            {data.cases.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}

        <p className='featuredtext'><span className="productstitle">Featured Pins</span>
        <a href={`/category/stickers`} className="browseall">All designs &gt;</a></p>

            {data.pins.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}

        <p className='featuredtext'><span className="productstitle">Featured Posters</span>
        <a href={`/category/posters`} className="browseall">All designs &gt;</a></p>

            {data.posters.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}

        <p className='featuredtext'><span className="productstitle">Featured Mugs</span>
        <a href={`/category/mugs`} className="browseall">All designs &gt;</a></p>

            {data.mugs.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}
        </table>

【问题讨论】：

使用slice：data.mugs.slice(0,5).map.... 将创建一个仅包含前 5 项的新数组
切片日期，然后将其映射到迭代！

标签： javascript reactjs

【解决方案1】：

您可以尝试使用.slice()，它会提取数组的一部分。

例如，对于连帽衫，您可以执行以下操作：

{data.hoodies.slice(0, 2).map((product) => (
    <Product key={product._id} product={product}></Product>
))}

如果您只想在主页中显示 2 个项目，您可以在组件的主体中使用条件语句（在 jsx 的 return 语句之前）。

例如，你可以说..

if (homepage) {
    data.hoodies = data.hoodies.slice(0, 2);
}

这有帮助吗？

【讨论】：

【解决方案2】：

使用切片功能

let data = {
  tshirts: [{ id: 1, name: 'red'},{ id: 2, name: 'green'},{ id: 3, name: 'blue'},{ id: 4, name: 'orange'},{ id: 5, name: 'yellow'}]
}
data.tshirts.slice(0,3).map((product) => console.log(product))

【讨论】：

【解决方案3】：

常量数据 = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}, {name: 'e'},];

data.slice(0,3).map((singleProduct) => console.log(singleProduct))

【讨论】：