javascript - React-Redux:通过对象的属性是否与状态中的其他数组匹配来过滤状态中的对象数组

Question

我有一个连接的 React 组件，它从状态中获取一组 Plot 对象。

它还从状态中获取多个字符串数组。像这样:

function mapStateToProps(state) {
    return {
        plots: state.plots.plots,
        varietyFilter: state.plots.varietyFilter,
        regionFilter: state.plots.regionFilter,
        growerFilter: state.plots.growerFilter,
        plotNameFilter: state.plots.plotNameFilter
    };
}

每个情节看起来像这样:

{ name, variety, region, grower}

...每个属性都是一个字符串。

我想根据适当的属性是否在这些过滤器数组中来过滤绘图。

标准的解决方案是使用像

这样的东西

const filteredArray = inputArray.filter( a => filterArray.indexOf(a.property)

这种方法存在三个问题。首先，如果过滤器数组为空，则过滤后数组的任何元素都不会通过，而我希望它们全部通过。其次，当那些从状态中显示出来的过滤器数组还没有被初始化时会发生什么？将出现错误，因为 indexOf 不可用。第三，我想链接这些过滤器方法，但只链接那些初始化了某种过滤器数组的方法。

到目前为止，我想出了这个:

if (this.props.plots) {
            filteredProps = this.props.plots.filter(function(plot) {
                if (!varietyFilter.indexOf) {
                    return true;
                }
                return varietyFilter.indexOf(plot.variety) > -1;
            });
        }

不过，这似乎让一切都过去了。如果我删除第一个 return 语句，我会得到一个错误——当组件第一次初始化时，indexOf 方法不存在。

那么，两个问题。首先，如何过滤对象数组以确定每个对象的给定属性是否包含在状态中可能存在或不存在的字符串数组中？其次，如何对一系列数组执行此操作，每个数组对应于原始数组中对象的不同属性？

Answer 1

要让 filterArray 为空数组时传递所有元素，并防止在它为 null 或未定义时出错，您可以这样做:

const filteredArray = inputArray.filter( a => (filterArray || []).length === 0 || filterArray.includes(a.property));

下面的代码将一个空数组设置为 filterArray 的默认值，以防它为 null 或未定义:

filterArray || []

如果数组长度为正，下面的部分进行过滤:

|| filterArray.includes(a.property)

这些代码等同于:

const filteredArray = inputArray.filter( a => {
    if (!filterArray) {
        filterArray = [];
    }
    if (filterArray.length === 0) {
        return true;
    } else {
        return filterArray.includes(a.property);
    }
}

可以通过以下方式链接多个过滤器:

var filters = [
    { prop: 'prop1', filterArray: ['abc', 'def'] },
    { prop: 'prop2', filterArray: ['abc'] },
    { prop: 'prop3', filterArray: ['abc', 'cde'] }
];

var filteredArray = [...inputArray];   // Copy inputArray

filters.forEach(filterObj => {
    filteredArray= filteredArray.filter( a => (filterObj.filterArray || []).length === 0 || filterObj.filterArray.includes(a[filterObj.prop]));
});