在 Redux 中映射和更改狀態

Question

我有一個像下面這樣的對象：

const initialState = {
  filters: {
    categories: [
      { text: "a", checked: true },
      { text: "b", checked: false },
      { text: "c", checked: false },
    ],
    brands: [
      { text: "d", checked: false },
      { text: "e", checked: true },
      { text: "f", checked: false },
    ],
    types: [
      { text: "g", checked: false },
      { text: "h", checked: true },
    ],
  },
};

我需要在單擊時將所有選中的字段更改為“false”。 我正在使用 redux，這是我的初始狀態。 下面是我的功能，但它不能正常工作。 據說“state.filters.map 不是函數”。

const filtersReducer = (state = initialState, action) => {
  switch (action.type) {
    case "RESET_ALL_STATES":
      return {
        ...state,
        filters: {
          ...state.filters,
          ...state.filters.map((filter) =>
            filter.map((option) =>
              option.checked === true ? { ...option, checked: false } : option
            )
          ),
        },
      };
    default:
      return state;
  }
};

Answer 1

以下解決方案使用Object.entries遍歷filter對象內的所有鍵/值對，以將每個數組的元素值重置為checked: false 。

 const state={filters:{categories:[{text:"a",checked:!0},{text:"b",checked:!1},{text:"c",checked:!1}],brands:[{text:"d",checked:!1},{text:"e",checked:!0},{text:"f",checked:!1}],types:[{text:"g",checked:!1},{text:"h",checked:!0}]}}; const resetFilters = Object.entries(state.filters).reduce( (acc, [key, arr]) => { acc[key] = arr.map((el) => ({ ...el, checked: false })); return acc; }, {} ); console.log(resetFilters);

在您的減速器的上下文中，這可能如下所示：

const filtersReducer = (state = initialState, action) => {
  switch (action.type) {
    case "RESET_ALL_STATES":
      return {
        ...state,
        filters: Object.entries(state.filters).reduce(
          (acc, [key, arr]) => {
            acc[key] = arr.map((el) => ({ ...el, checked: false }));
            return acc;
          },
          {}
        ),
      };
    default:
      return state;
  }
};