基于嵌套数组的过滤返回所有

Question

我正在尝试在 Vuex 中创建一个 getter，它返回一个状态的过滤版本。 过滤器看起来像这样：

const state = () => ({
  recipes: [],
  appliedFilters: {
    engineers: null,
    categories: null,
    formats: null
  }
})

...

const getters = {

  getFilteredRecipes(state) {
    const appliedFilters = state.appliedFilters
    let recipesClone = state.recipes.slice(0)
    Object.keys(appliedFilters).forEach((key) => {
      var value = appliedFilters[key];
      if (value != null) {
        recipesClone.filter((recipe) => {
          return recipe.fields[key].some((field) => {
            return field.sys.id === value
          })
        })
      }
    })
    return recipesClone
  }

}

因此state.appliedFilters是一个对象，它根据用户在选择字段中选择的内容，通过操作从模块中更改其值。 如果用户在“工程师 A”的选择字段中选择“工程师 A”，则会调度一个操作，并且一个突变将state.appliedFilters.engineer设置为选择的值，在本例中为“工程师 A”的 ID。

我想遍历这个对象的键/值对，以查看做出了哪些选择，然后不断过滤state.recipes直到它通过所有应用的过滤器。 因此，如果我要使用上面的示例，过滤器应返回所有以“工程师 A”为工程师的配方。 如果过滤器值是null ，它应该跳过滤波和去到下一个键/值对的appliedFilters ，在这种情况下categories 。

但是每次 getter 都会返回所有的配方。 知道我在这里做错了什么吗？

Answer 1

recipesClone.filter实际上并没有改变recipesClone ，它只是返回一个新的过滤列表，所以你应该将该新列表分配给recipesClone以反映其中的变化。 recipesClone = recipesClone.filter(...) 。

这是我在代码中看到的一个明显问题。 看看这是否足以修复它。

Answer 2

在这个函数调用中，你克隆了数组，使用应用的过滤器数组做一些事情，然后只返回数组的克隆：

 getFilteredRecipes(state) {
    const appliedFilters = state.appliedFilters
    let recipesClone = state.recipes.slice(0) // clone here
    Object.keys(appliedFilters).forEach((key) => { // loop here
      var value = appliedFilters[key];
      if (value != null) {
        recipesClone.filter((recipe) => {   // no return here
          return recipe.fields[key].some((field) => {
            return field.sys.id === value
          })
        })
      }
    })
    return recipesClone // return original
  }

如果要返回已过滤版本的食谱，则需要返回过滤结果。 从您的问题中并不清楚过滤器如何与您的数据相关，但这样的事情会返回过滤后的数据：

getFilteredRecipes(state) {

    const appliedFilters = state.appliedFilters
    let recipesClone = state.recipes.slice(0)
    let filteredRecipes = []
    Object.keys(appliedFilters).forEach((key) => {
      var value = appliedFilters[key];
      if (value != null) {
        const filtered = recipesClone.filter((recipe) => {
          return recipe.fields[key].some((field) => {
            return field.sys.id === value
          })
        })
        filteredRecipes = [...filteredRecipes, ...filtered] // ??
      }
    })
    return flteredRecipes;
  }