时间戳

首页 > 解决方案 > 当相应项中没有值时，从 Redux 初始状态中删除完整对象

javascript - 当相应项中没有值时，从 Redux 初始状态中删除完整对象

问题描述

在我的减速器中，我的初始状态如下所示：

    const initialState = {
        isLoading: false,
        events: [
        {
        year: 2021,
        place: [
        {
          id: 1,
          name: "BD"
        },
        {
          id: 2,
          name: "BD Test"
        }
      ]
    },
    { year: 2020, place: [{ id: 3, name: "AMS" }, { id: 4, name: "AMS TEST" }] }
  ]
};

我一直在尝试实现删除操作的功能。因此，当单击按钮时，将调度“deleteItems”操作，该操作将从place. 此功能工作正常。但是，events如果place.

这是我已经尝试过的，但它只是删除了个人place. place但是，我需要在这里编写当变为空时删除整个项目的逻辑。

case "deleteItems":
  return {
    ...state,
    events: state.events.map(event => {
      const place = event.place.find(x => x.id === action.id);
      if (place) {
        return {
          ...event,
          place: event.place.filter(x => x.id !== action.id)
        };
      }
      return event;
    })
  };

因此，在修改后，状态将如下所示：（当 2021 年没有值时）

const initialState = {
  isLoading: false,
  events: [
    { year: 2020, place: [{ id: 3, name: "AMS" }, { id: 4, name: "AMS TEST" }] }
  ]
};

有谁知道如何做到这一点。任何帮助将不胜感激。在此先感谢。Demo可以从这里看到

标签： javascriptarraysreactjsreduxreact-redux

解决方案

我先删除了这些地方。然后我根据位置数组是否为空来过滤事件。之后，我返回了状态。

case "deleteItems":
      const eventsPostDeletingPlaces = state.events.map(event => {
        const place = event.place.find(x => x.id === action.id);
        if (place) {
          return {
            ...event,
            place: event.place.filter(x => x.id !== action.id)
          };
        }
        return event;
      });
      const eventsWithPlaces = eventsPostDeletingPlaces.filter((each) => each.place.length);
      return {
        ...state,
        events: eventsWithPlaces
      }

在此处检查已编辑的沙箱

推荐阅读