-问题:删除一个项目

Question

我正致力于在我的反应项目中实现漂亮的dnd。

我有以下数据：

const initialData = {
        users: {
            'user-1': { id: 'user-1', name: 'John'},
            'user-2': { id: 'user-2', name: 'Patrick'},
            'user-3': { id: 'user-3', name: 'Malorie'},
            'user-4': { id: 'user-4', name: 'Eric'},
            'user-5': { id: 'user-5', name: 'Bob'},
            'user-6': { id: 'user-6', name: 'Blob'}
        },
        areas: {
            'area-0': {
                id: 'area-0',
                title: 'Main Area',
                userIds: ['user-1', 'user-2', 'user-3', 'user-4', 'user-5', 'user-6']
            },
            'area-1': {
                id: 'area-1',
                title: 'Area 1',
                userIds: []
            },
            'area-2': {
                id: 'area-2',
                title: 'Area 2',
                userIds: []
            }
        },
        areaOrder: ['area-0', 'area-1', 'area-2'],
    }

在还原器中，我试图以这种方式删除其中一个用户：

case REMOVE_USER_ACTION:
    return {
        ...state,
        users: [ ...state.users.filter(user => user !== action.id) ]
    }

我得到了一个错误：

TypeError: e.users.filter不是一个函数，或者它的返回值不可迭代

我搜索了这个错误，但是我找不到类似的场景，也找不到解决这个问题的方法。

Answer 1

如果数据是对象，则无法筛选state.users。要么您更改了initialData形状，要么如果它真的是这样的话，那么您必须采取某种方法从对象中删除一个键。

case REMOVE_USER_ACTION:
    const users = { ...state.users };
    delete users[action.id];
    return {
        ...state,
        users,
    }

Answer 2

TypeError: e.users.filter不是一个函数，或者它的返回值不可迭代

这意味着users不是数组，而是object。

这样您就可以以这样的方式获得过滤的用户：

​

const users = {'user-1':{id:'user-1',name:'John'},'user-2':{id:'user-2',name:'Patrick'},'user-3':{id:'user-3',name:'Malorie'},'user-4':{id:'user-4',name:'Eric'},'user-5':{id:'user-5',name:'Bob'},'user-6':{id:'user-6',name:'Blob'}};

const actionId = "user-1";
const filteredUsers = Object.entries(users).filter(([key, value]) => value.id != actionId);
console.log(Object.fromEntries(filteredUsers));

​

因此，您的REMOVE_USER_ACTION看起来就像

case REMOVE_USER_ACTION:
    return {
        ...state,
        users: filteredUsers
    }

但是，，，您应该从性能、有意义的名称和干净代码方面将users类型从object更改为array。

​

const users = [{ id: 'user-1', name: 'John'},
         { id: 'user-2', name: 'Patrick'},
         { id: 'user-3', name: 'Malorie'},
         { id: 'user-4', name: 'Eric'},
         { id: 'user-5', name: 'Bob'},
         { id: 'user-6', name: 'Blob'}
       ];
       
const actionId = "user-1";
const filteredUsers = users.filter(item => item.id != actionId);
console.log(filteredUsers);

​

Answer 3

users是一个对象，而不是一个数组，所以您不能对它进行迭代

下面是使用Object.entries的一个可能的解决方案

case REMOVE_USER_ACTION:
  return {
    ...state,
    users: Object.entries(state.users).reduce((acc, [key, value]) => {
      if (key !== action.id) {
        acc[key] = value;
      }
      return acc;
    }, {})
  }