尝试对对象执行过滤器方法

Question

我正在尝试删除待办事项，我想从具有特定 ID 的对象“byIds”中删除该项目。 它就像数组的过滤器，但对象的过滤器。 我不知道有什么复杂的希望得到帮助我相信它很愚蠢

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO } from "../actionTypes";

const initialState = {
  allIds: [],
  byIds: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case ADD_TODO: {
      const { id, content } = action.payload;
      return {
        ...state,
        allIds: [...state.allIds, id],
        byIds: {
          ...state.byIds,
          [id]: {
            content,
            completed: false,
          },
        },
      };
    }
    case TOGGLE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        byIds: {
          ...state.byIds,
          [id]: {
            ...state.byIds[id],
            completed: !state.byIds[id].completed,
          },
        },
      };
    }
    // of course its toggling but it doesn't even get there
    case DELETE_TODO: {
      const { id } = action.payload;
      return {
        ...state,
        allIds: state.allIds.filter((todo) => todo !== id),
        byIds: state.byIds.filter((todo) => todo !== id),
      };
    }
    default:
      return state;
  }
}

{
  todos: {
    allIds: [
      1,
      2,
      3,
      4
    ],
    byIds: {
      '1': {
        content: 'Test1',
        completed: false
      },
      '2': {
        content: 'Test2',
        completed: false
      },
      '3': {
        content: 'test3',
        completed: false
      },
      '4': {
        content: 'test4',
        completed: false
      }
    }
  },
  visibilityFilter: 'all'
}

对于要求我控制台记录 byIds 的人希望对我有所帮助

Answer 1

您需要的是遍历byids 对象的keys 并只取您需要的那些。

case DELETE_TODO: {
  const { id } = action.payload;
  let newObj = {}

  Object.keys(state.byIds).forEach(function(key) {
    if (key !== id) {
      newObj[key] = state.byIds[key]
   }
  });
  return {
    ...state,
    allIds: state.allIds.filter((todo) => todo !== id),
    byIds: newObj 
  };
}

如果您的 id 不是字符串而是数字，则需要检查 key != id 而不是 key !== id

Answer 2

您可以在创建新对象时使用其余语法排除 id。

case DELETE_TODO: {
  const { id } = action.payload;
  const { [id]: _, ...restByIds } = state.byIds;
  return {
    ...state,
    allIds: state.allIds.filter((todo) => todo !== id),
    byIds: restByIds,
  };
}

Answer 3

你可以像这样将id分开：

case DELETE_TODO: {
  const id = action.payload.id;
  const { [id]: _, ...filteredState } = state.byIds; 
  // ^ this takes id from state and puts it in variable _,
  // everything else is packed into filteredState

  return {
    ...state,
    allIds: state.allIds.filter((todo) => todo !== id),
    byIds: filteredState,
  };
}

---

编辑： 任何想知道上述语法的人的额外说明，请参阅以下链接：

Computed Property Names，我们怎么抢[id]

Destructuring assignment，我们如何打包回...filteredState

Awesome comment explaining destructuring