Question

我正在尝试在Jact数组上启用React内的过滤。我按字母顺序排序，然后我需要按类别键过滤IF如果选择下拉列表更改为该类别（这是通过onChange事件上的过滤器参数传递的）。

然后我映射过滤后的数组，输出相关的HTML。

我的问题是，如果＆＃39;全部＆＃39;选择下拉列表中是否选择了选项？目前，当选择该元素时，不会将任何元素传递给地图，也不会渲染任何元素。

谢谢：）

renderProduce(orderBy, filter) {
    return this.fetchProduce()
        .sort(function(a,b) {
            return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);
        })
        .filter(function(item) {
            if ( filter != 'All' ) {
                return item.category == filter;
            }
        })
        .map((item, i) => (
            <Item key={i} item={item} />
        ));
}

Answer 1

如果选择filter过滤器，则true回调始终返回'All'，即可实现此目的。

    .filter(function(item) {
        return filter === 'All' || item.category == filter
    })

Answer 2

Array#filter生成一个新数组，其中填充了所有元素，过滤器回调的相应迭代返回true。目前，当选择'All'时，您的过滤器操作返回的是undefined，这是假的。在过滤器回调中的if条件之后返回true：

.filter(function(item) {
    if ( filter != 'All' ) {
        return item.category == filter;
    }
    return true;
})

Answer 3

如果filter === 'All'，则不要过滤

第二：除非你按索引过滤，否则过滤应始终是第一步。因为其余部分现在可以在一组可能较小的数据上执行。

renderProduce(orderBy, filter) {
    var arr = this.fetchProduce();
    return (filter === "All"? arr: arr.filter(item => item.category == filter))
        .sort((a,b) => a.name.localeCompare(b.name))
        .map((item, i) => (
            <Item key={i} item={item} />
        ))
}

仅在选择特定选择选项时才在JavaScript中过滤数组

3 个答案: