在redux中Map和更改状态

r7knjye2 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(402)

我有一个对象如下：

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

JavaScript reactjs redux maping

来源：https://stackoverflow.com/questions/68544510/maping-and-changing-states-in-redux

1条答案

按热度按时间

bkhjykvo1#

使用以下解决方案： 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;
  }
};

赞(0）回复(0）举报 2021-09-13

我来回答

在redux中Map和更改状态

1条答案

相关问题

热门标签

最新问答