Javascript React-筛选数组后开始索引

我有一些产品，我正试图在我的应用程序中显示。有些产品被标记为特色产品，我想从本节中排除这些产品。我还想只展示前4个非特色产品。我正在使用

map

对产品进行迭代，并使用

filter

删除特色产品。在我的map函数中，我添加了一个条件，仅当产品的

索引

小于或等于

3

（显示前4个）时才显示该产品。这部分起作用了，除了我筛选出来的产品仍然被分配了一个索引，而且由于前两篇文章被标记为特色，它只显示了2个产品，而不是4个，因为第一篇非特色文章的索引为

2

{products.filter(product => product.featured == false).map((product, index) => {
    if (index >= 3) {
        console.log(index);
        return (
            <div key={index} className="product"><Product /></div>
        );
    }
})}

{products.filter（product=>product.featured==false）.map（（产品，索引）=>{
如果（索引>=3）{
控制台日志（索引）；
返回(
);
}
})}

使用您的代码和一些测试数据：

const products = [
{
    name: "fp1",
    featured: true
},
{
    name: "p1",
    featured: false
},
{
    name: "p2",
    featured: false
},
{
    name: "fp2",
    featured: true
},
{
    name: "p3",
    featured: false
},
{
    name: "p4",
    featured: false
},
{
    name: "fp3",
    featured: true
},
{
    name: "p5",
    featured: false
}
];

var results = products
.filter(product => product.featured == false)
.map((product, index) => {
    if (index >= 3) {
    console.log(index);
    // I return product.name instead of a div for testing purposes
    return product.name;
    }
});

我得到以下输出：

[ undefined, undefined, undefined, 'p4', 'p5' ]

原因是

map

函数在每次迭代时都会返回一个值，但是，如果

中有一个条件，则意味着只有当
索引>=3
时才会返回值。这意味着前3项未定义

您要做的是：

var results = products
.filter(product => product.featured == false)
.slice(0, 4)
.map(product => {
    return product.name;
});

这将筛选出
特色产品
，然后从结果数组中获取前4个，然后将这4个产品映射到
字符串
，或者在您的情况下，映射到
div

上述代码的结果是：

[ 'p1', 'p2', 'p3', 'p4' ]

如果非特色产品少于4种，这也适用

另外值得注意的是，如果您可以帮助的话，不应该将数组索引用作键，请参阅。如果您有
product.id
，那么使用它会很好

另外，尽量不要使用
var
，而是使用
const
（或者
let
，如果您计划重新分配变量），因为使用
var
（）时变量范围存在问题

改进后的函数如下所示：

const results = products
.filter(p => !p.featured)
.slice(0, 4)
.map(p => (
    <div key={p.id} className="product">
        <Product />
    </div>
));

const results=产品
.filter（p=>！p.featured）
.slice（0,4）
.map（p=>(
));
使用您的代码和一些测试数据：

const products = [
{
    name: "fp1",
    featured: true
},
{
    name: "p1",
    featured: false
},
{
    name: "p2",
    featured: false
},
{
    name: "fp2",
    featured: true
},
{
    name: "p3",
    featured: false
},
{
    name: "p4",
    featured: false
},
{
    name: "fp3",
    featured: true
},
{
    name: "p5",
    featured: false
}
];

var results = products
.filter(product => product.featured == false)
.map((product, index) => {
    if (index >= 3) {
    console.log(index);
    // I return product.name instead of a div for testing purposes
    return product.name;
    }
});

我得到以下输出：

[ undefined, undefined, undefined, 'p4', 'p5' ]

原因是
map
函数在每次迭代时都会返回一个值，但是，如果
中有一个条件，则意味着只有当
索引>=3
时才会返回值。这意味着前3项未定义

您要做的是：

var results = products
.filter(product => product.featured == false)
.slice(0, 4)
.map(product => {
    return product.name;
});

这将筛选出
特色产品
，然后从结果数组中获取前4个，然后将这4个产品映射到
字符串
，或者在您的情况下，映射到
div

上述代码的结果是：

[ 'p1', 'p2', 'p3', 'p4' ]

如果非特色产品少于4种，这也适用

另外值得注意的是，如果您可以帮助的话，不应该将数组索引用作键，请参阅。如果您有
product.id
，那么使用它会很好

另外，尽量不要使用
var
，而是使用
const
（或者
let
，如果您计划重新分配变量），因为使用
var
（）时变量范围存在问题

改进后的函数如下所示：

const results = products
.filter(p => !p.featured)
.slice(0, 4)
.map(p => (
    <div key={p.id} className="product">
        <Product />
    </div>
));

const results=产品
.filter（p=>！p.featured）
.slice（0,4）
.map（p=>(
));
显示允许我们重现您的问题的产品的一些示例数据。显示允许我们重现您的问题的产品的一些示例数据。