javascript - React - 索引在数组过滤后开始

Question

我想在我的应用程序中显示一些产品。某些产品被标记为特色产品，我想从本部分中排除这些产品。我还想仅展示前 4 个非特色产品。我使用 map 迭代产品，并使用 filter 删除特色产品。在我的 map 函数中，我添加了一个条件，以便仅在 index 小于或等于 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>
        );
    }
})}

Answer 1

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

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 函数在每次迭代时总是返回一个值，但是，您有一个条件 if 这意味着仅当 >索引 >= 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 个，这也适用。

还值得注意的是，如果可以的话，您不应该使用数组索引作为键，请参阅 React docs 。如果您有product.id，那么就可以很好地使用。

另外，尽量不要使用 var 并使用 const (如果您打算重新分配变量，则使用 let)，因为有使用 var( see here ) 时出现变量作用域问题。

改进的功能将是这样的:

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