基於嵌套數組的過濾返回所有

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;
  }